window.screen.width and window.screen.height not working on iPad 3

Question

I'm using the functions

window.screen.width
window.screen.height

to detect the screen resolution of the user. They work like a charm on PCs, but they don't on iPad 3. They output 768 and 1024 instead of 2048 and 1536.

Can somebody help me, please? Thank you in advance

Answer 1

Yep. Welcome to the interesting world of Mobile devices!

The iPad 3 (and other retina devices) use window.devicePixelRatio set to 2 to show that they have different css pixels to logical pixels. An iPad 3 still reports 1024 × 768, as that is the number of CSS pixels.

As another source of confusion, some Android devices report the viewport width, and some the physical width, meaning that if you ask some Android devices, the window.screen.height will be thousands and thousands if the document is long.

In short, for your problem, use window.devicePixelRatio as a multiplier. I'd use something like

if(!window.devicePixelRatio) {
    window.devicePixelRatio = 1;
}

To ensure that if it isn't set that it's declared as 1 before you start.