How to detect the screen resolution with JavaScript

Question

Is there a way that works for all browsers

User · 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   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

User · Answer

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

User · Answer

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   amp  amp  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

User · Answer

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

User · Answer

var width   screen width  var height   screen height

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

just for future reference   function getscreenresolution         window alert  Your screen resolution is      screen height    x    screen width

User · Answer

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

User · Answer

Using jQuery you can do     window  width     window  height

[javascript] How to detect the screen resolution with JavaScript?

Examples related to javascript

Examples related to screen-resolution