How to determine actual viewport width and height on iOS How to determine actual viewport width and height on iOS ios ios

How to determine actual viewport width and height on iOS


EDIT: Use document.body.clientWidth and document.body.clientHeight to get the calculations you desire, as my original solution is now considered obsolete.

You can use document.width and document.height to retrieve the original page size on iOS Safari, even if you've pinch-zoomed.

Here's a test on the old Space Jam site (which came to mind when trying to think of a site that definitely wouldn't be responsive).

enter image description here


Here's a trickier but kinda useless way:Make a page-sized element then compute/get its actual size.

let page_size = { height: null, width: null };{    let div = document.createElement('div');    (styles => Object.keys(styles).forEach(k => div.style[k] = styles[k]))({        height: '100vh', width: '100vw',        position: 'fixed',        top: '-100vh', left: '-100vw'    })    document.body.appendChild(div);    page_size.height = div.offsetHeight;    page_size.width = div.offsetWidth;}