var on = function (el, ev, fn) {
el.addEventListener(ev, fn, { passive: true });
};
// workaround for undefined global
window.global = window;
// fix some ipad/iphone issues
function appSize() {
var widths = [window.innerWidth || 0, document.documentElement.clientWidth];
var heights = [window.innerHeight || 0, document.documentElement.clientHeight];
document.documentElement.style.setProperty('--app-height', `${Math.max.apply(null, heights)}px`);
document.documentElement.style.setProperty('--app-width', `${Math.max.apply(null, widths)}px`);
}
on(window, 'resize', appSize);
on(window, 'orientationchange', appSize);
on(document, 'DOMContentLoaded', function () {
// prevent scrolling/dragging issues in fullscreen by wrapping the content in a div within the body
var wrapper = document.getElementById('app-wrapper');
var stopPropagation = function (e) {
e.stopPropagation();
};
on(wrapper, "touchstart", stopPropagation);
on(wrapper, "touchmove", stopPropagation);
on(wrapper, "touchend", stopPropagation);
on(wrapper, "mousedown", stopPropagation);
on(wrapper, "mousemove", stopPropagation);
on(wrapper, "mouseup", stopPropagation);
appSize();
});
appSize();
// Example usage in CSS
body>div {
height:var(--app-height); /* 100vh not working correctly on iPad/iPhone */
width:var(--app-width); /* 100vw not working correctly on iPad/iPhone */
}
523100cookie-checkGet Correct App Dimensions in PWA