Detecting Physical Screen Dimensions of Webkit Devices in JavaScript

How to detect the screen resolution with JavaScript?

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

Shouldn't window.screen.width/height correspond to actual screen width/height?

Update:

The issue we see in the emulator with window.screen.width is when we use screens which don't reflect the actual pixels of the device. So what you see on the screen is 320 and what the device has is 480 or whatever. I don't understand, though, why the value of screen width would give the emulator size on the screen and not the actual pixels.

This thing might be the same issue with the devices? If their density is higher at some sizes... for whatever the reason this could translate to some wrong screen width size?

Anyway, read below for my solution.

---

screen.availWidth does not work for me on certain screen sizes on the emulator.

Only thing is working for me now is:

window.innerWidth
window.innerHeight

Which will return the value of the Viewport. In my case I'm running an HTML5 app. This values will not update on zoom, apparently.

They have some issues with this sizes on Android's Webkit. You can see the devs from Android talking about it here. Probably fixed in Honeycomb.

Somebody claims it takes some sizes as if the soft keyboard would be present.

Using Javascript, how can I detect whether the browser is running on a tablet device vs a phone?

Originally I thought that what I needed to know was what kind of device the web application was running on, and then I moved on to thinking that I needed to know the physical screen size of the device. I now think that it is actually the DPI of the device that is relevant.

On a low resolution device such as a desktop monitor (typically well below 150 DPI) or an iPad 2 (132 DPI), the 16 x 16 buttons is a good size, but on a high resolution device such as an iPhone with retina display (326 DPI), the 48 x 48 buttons are better suited because 16 x6 16 shows up way too small.

Using Modernizr with it's .mq() function for running media queries, you can determine the device's screen resolution with Javascript code.

var isHighResolutionDisplay = Modernizr.mq("screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 250dpi)");

This page has a great list of many different devices and their pixel density.

Detecting a retina display iPad with javascript

I haven't tested this, but here's an approach I think might work. I'll do a jsbin for it when I get time.

Because all devices (to the best of my knowledge) adjust for devicePixelRatio before passing the value to CSS media queries we can (in slightly pseudo code)

1. measure window.devicePixelRatio and screen.availWidth

2. Write a style tag to the head which includes a media query something like the following

   #my-test-el {
     display: none;
     visibility: visible;
   }
   
   @media screen and (min-device-width:screen.availWidth) {
     #my-test-el {
    visibility: hidden;
     }
   }
   

3. Append <div id="my-test-el"> to the page

4. Read off the style.visibility attribute. If it equals hidden then the css value is the same value as screen.availWidth => screen.availWidth has been preadjusted for dpr.

edit It works! http://jsbin.com/IzEYuCI/3/edit. I'll put together a modernizr plugin too

edit And here's the pull request to get it in Modernizr - https://github.com/Modernizr/Modernizr/pull/1139. please upvote if you'd find it useful

Detect scale settings (dpi) with JavaScript or CSS

Try accessing window.devicePixelRatio variable.

The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

More info about it: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

You could also use CSS resolution for this, more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

How to detect the screen DPI using JavaScript

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
    dpi_x = document.getElementById('testdiv').offsetWidth;
    dpi_y = document.getElementById('testdiv').offsetHeight;
</script>

Then you can use JQuery to send dpi_x and dpi_y this to to your server

http://jsfiddle.net/sxfv3/

---

Related Topics