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

Question

I use functions

window.screen.width window.screen.height 

to determine the screen resolution of the user. They work like a charm on a PC, but they are not on an iPad 3. They output 768 and 1024 instead of 2048 and 1536.

Can someone help me please? Thank you in advance

Answer 1

Yeah. Welcome to the interesting world of mobile devices!

iPad 3 (and other retina devices) use window.devicePixelRatio for 2 to show that they have different css pixels for logical pixels. IPad 3 still reports 1024x 768, since this is the number of CSS pixels.

As another source of confusion, some Android devices report a viewport width and some physical width, which means that if you ask some Android devices, 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 would use something like

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

To make sure that if it is not installed, it is declared as 1 before starting.

Answer 2

 if(window.devicePixelRatio !== undefined) { dpr = window.devicePixelRatio; } else { dpr = 1; } var screen_width = window.screen.width * dpr; var screen_height = window.screen.height * dpr; 

This solution works just fine.