Tutorial :How to detect the screen resolution with JavaScript?


Is there a way that works for all browsers?


original answer


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  


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


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()  


Using jQuery you can do:

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


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.


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.


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;  };  


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


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;  }  


just for future reference:

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


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}  });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »