How to detect the screen resolution with JavaScript?

javascript screen-resolution
iceorangeblue picture iceorangeblue · Feb 11, 2010 · Viewed 367.9k times · Source

Is there a way that works for all browsers?

Answer

John Weldon picture John Weldon · Feb 11, 2010

original answer

Yes.

window.screen.availHeight
window.screen.availWidth

update 2017-11-10

From Tsunamis in the comments:

To get the native resolution of i.e. a mobile device you have to multiply with the device pixel ratio: window.screen.width * window.devicePixelRatio and window.screen.height * window.devicePixelRatio. This will also work on desktops, which will have a ratio of 1.

And from Ben in another answer:

In vanilla JavaScript, this will give you the AVAILABLE width/height:

window.screen.availHeight
window.screen.availWidth

For the absolute width/height, use:

window.screen.height
window.screen.width

Related questions

Detect screen width for multiple monitors

My website is optimized (with fixed width) for 1024x768 layout. I plan to add vertical banners on either side of the page for people having resolution width 1280 or higher. Using screen.width, I can easily do this. But I face …

Read More
screen.width and screen.availwidth difference in javascript

What is the difference between screen.width and screen.availwidth in JavaScript? On my system both are the same!

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More