How to get iPad screen width in Javascript

Question

I need to dynamically get the screen size of all mobile devices from a webpage using Javascript.

I have tried this:

//get window's size
if (document.body && document.body.offsetWidth) {
 windowsWidth = document.body.offsetWidth;
 windowsHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 windowsWidth = document.documentElement.offsetWidth;
 windowsHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 windowsWidth = window.innerWidth;
 windowsHeight = window.innerHeight;
}

But on iPad I get this size: 980 x 1080 (not the real 768 x 1024).

Thanks

Mauro

Parasitism

here, see this answer: https://mcmap.net/q/150004/-get-the-device-width-in-javascript/1291428 – Pixie

the window size != the resolution of the screen. – Octavie

Answer 1

Getting the screen dimensions on iPad requires reading the width and height properties of the screen object.

var height = screen.height;
var width = screen.width;

These will provide 768 and 1024 depending on orientation.

Firefly

screen.width and screen.height are returning incorrect values. Look at the observations below: - For iPad3 its returning 768 x 1024 where as its original resolution is 1536 x 2048. - For iPhone5 its returning 320 x 568 where as its original resolution is 640 x 1136. As per my observations, screen.width and screen.height are working perfectly fine for Android devices. But for iOS devices, its returning incorrect values. Any ideas for how to find Screen Resolution for iOS devices? – Polemist

@AnkitPrajapati it returns the css resolution, which is the purpose of screen.width. You should always treat the device resolution as it's css resolution. – Highboy

@JoshLyness: Thanks for the clarification. :) – Polemist

@AnkitPrajapati I know you've probably realised that by now anyway, but it's just in case anyone else has the same problem ;) – Highboy