CODEWITHSUNDEEP
javascripthtmliossafariviewport
nick.skriabin
nick.skriabin

Reputation: 873

How to determine actual viewport width and height on iOS

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:

enter image description here

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:

enter image description here

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.

Upvotes: 17

Views: 9032

Answers (2)

Nianyi Wang
Nianyi Wang

Reputation: 773

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

Upvotes: 2

Jon Uleis
Jon Uleis

Reputation: 18649

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

Upvotes: 6

Related Questions