How to determine actual viewport width and height on iOS

Question

I've been stuck at such easy task as determine page width and height on iOS when the page is zoomed by the user.

The problem is that some web sites has strange layout and looks like this:

This is a not scaled page and it has resolution of 1164x1811 pixels and that's correct. I've got these values from window.innerWidth and window.innerHeight. Highlighted area is a body element and it has resolution of 1024x1594 pixels, that matters.

Next I use pinch-to-zoom to zoom page in and this is how it looks:

Now, when I trying to get page size I got 1024x1594 pixels from window.innerWidth and window.innerHeight respectively. These values are exact same to body size.

So the question is how to get the right page size whether with zoom or not.

I've tested this particular case in Chrome as well and get correct result: it's always 1164x1811 pixels regardless to zoom.

Answer 1

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).

Answer 2

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;
}