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