Reputation:

How to detect the screen resolution with JavaScript?

Is there a way that works for all browsers?

Upvotes: 271

Answers (13)

sanampakuwal

Reputation: 538

Easy steps to find screen resolution is:

Copy

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

paste in browser console
hit enter

Upvotes: 1

Deen John

Reputation: 3770

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

Upvotes: 4

John Weldon

Reputation: 40789

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

Upvotes: 410

Ben

Reputation: 2209

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

Upvotes: 43

daniel

Reputation: 41

just for future reference:

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

Upvotes: 4

Abram

Reputation: 41954

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

Upvotes: 4

serfer2

Reputation: 2683

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.

Upvotes: 31

Anabar

Reputation: 1101

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

Upvotes: 4

posit labs

Reputation: 9471

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

Upvotes: 13

chaim.dev

Reputation: 279

Using jQuery you can do:

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

Upvotes: 18

Alessandro

Reputation: 609

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

Upvotes: 60

Larry K

Reputation: 49114

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.

Upvotes: 23

cletus

Reputation: 625397

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

Upvotes: 7

How to detect the screen resolution with JavaScript?

Answers (13)

Related Questions