Get Correct App Dimensions in PWA

Date: 2021-08-03
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 */
}
52310cookie-checkGet Correct App Dimensions in PWA