How to detect the screen resolution with JavaScript?

Question

Is there a way that works for all browsers?

Answer 1

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

Answer 2

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

Answer 3

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

Both of the above can be written without the window prefix.

Like jQuery? This works in all browsers, but each browser gives different values.

$(window).width()
$(window).height()

Answer 4

You can also get the WINDOW width and height, avoiding browser toolbars and... (not just screen size).

To do this, use: window.innerWidth and window.innerHeight properties. See it at w3schools.

In most cases it will be the best way, in example, to display a perfectly centred floating modal dialog. It allows you to calculate positions on window, no matter which resolution orientation or window size is using the browser.

Answer 5

Do you mean display resolution (eg 72 dots per inch) or pixel dimensions (browser window is currently 1000 x 800 pixels)?

Screen resolution enables you to know how thick a 10 pixel line will be in inches. Pixel dimensions tell you what percentage of the available screen height will be taken up by a 10 pixel wide horizontal line.

There's no way to know the display resolution just from Javascript since the computer itself usually doesn't know the actual dimensions of the screen, just the number of pixels. 72 dpi is the usual guess....

Note that there's a lot of confusion about display resolution, often people use the term instead of pixel resolution, but the two are quite different. See Wikipedia

Of course, you can also measure resolution in dots per cm. There is also the obscure subject of non-square dots. But I digress.

Answer 6

Using jQuery you can do:

$(window).width()
$(window).height()

Answer 7

Trying to get this on a mobile device requires a few more steps. screen.availWidth stays the same regardless of the orientation of the device.

Here is my solution for mobile:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Answer 8

See Get Monitor Screen Resolution with Javascript and the window.screen object

Answer 9

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode=='CSS1Compat') return de.clientWidth;
   else return db.clientWidth;
}

Answer 10

just for future reference:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + 'x' + screen.width);
}

Answer 11

If you want to detect screen resolution, you might want to checkout the plugin res. It allows you to do the following:

var res = require('res')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Here are some great resolution takeaways from Ryan Van Etten, the plugin's author:

• 2 unit sets exist and differ at a fixed scale: device units and CSS units.
• Resolution is calculated as the number of dots that can fit along a particular CSS length.
• Unit conversion: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
• CSS has relative and absolute lengths. In normal zoom: 1⁢em = 16⁢px
• dppx is equivalent to device-pixel-ratio.
• devicePixelRatio definition differs by platform.
• Media queries can target min-resolution. Use with care for speed.

Here's the source code for res, as of today:

!function(root, name, make) {
  if (typeof module != 'undefined' && module.exports) module.exports = make()
  else root[name] = make()
}(this, 'res', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == 'undefined' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {'dppx': dppx, 'dpi': dpi, 'dpcm': dpcm}
});

Answer 12

if you mean browser resolution then

window.innerWidth gives you the browser resolution

you can test with http://howbigismybrowser.com/ try changing your screen resolution by zoom in / out browser and check resolution size with http://howbigismybrowser.com/ Window.innerWidth should be same as screen resolution width

Answer 13

Easy steps to find screen resolution is:

• Copy

`My screen resolution is: ${window.screen.width} * ${window.screen.height}`

• paste in browser console
• hit enter