Detecting physical screen dimensions of WebKit devices in JavaScript

Question

I'd like to categorize devices by screen width in client-side JavaScript code

• All devices fitting to one hand (7" less) to mobile category

• Treat other devices as desktop devices

• Fallback: Treat devices which do not support necessary APIs as mobile devices

Question

• Which related JavaScript and CSS APIs I could use to detect the screen physical dimensions? Please note that these APIs do not need to be necessarily supported in older browsers, as there is safe fallback. Also, I don't care about legacy desktop browsers either.

Firefox support is optional - if they have compatible APIs already.

Please note that this is about physical dimensions, not pixel dimensions.

Answer 1

There's no direct way to get the screen size in inches, but there are workarounds that use screen density to find the device size. It's not perfect, but you don't really need to know the exact size to 5 significant figures. Also, it is normally better to simply use pixel values, IMO.

HTML

Make a test div, and then see the number of pixels displayed to get the pixel density, then use that in your calculations. This should work, assuming that your browser/OS are configured properly (it didn't work in the this question but it was within half an inch on my computer).

EDIT: This is 100% wrong. The inch/cm measurements in CSS aren't based on an actual physical measurement. They're based on an exact conversion (1 inch = 96 px, 1 cm = 37.8 px). My apologies.

CSS

The best way to detect physical screen size is to use CSS media queries. The min-resolution and max-resolution queries can be used to get the resolution in either dpi or dpcm:

@media (min-resolution: 300dpi){
  // styles
}

Combining it with the min-device-width and max-device-width queries, you get something like:

@media (resolution: 326dpi) and (device-width: 640) and (device-height: 960){
    // iPhone
}

The problem is that if you want to target 7 inch devices, you'd have to have many resolutions and corresponding widths that go together, which could get complicated.

For more information:

• MDN- CSS Media Queries
• MDN- Resolution
• "Mobifying" Guide
• High DPI Images for Variable Pixel Densities (Somewhat Related)

Javascript

You can use window.devicePixelRatio to determine the screen density. From Android's WebView Reference:

The window.devicePixelRatio DOM property. The value of this property specifies the default scaling factor used for the current device. For example, if the value of window.devicePixelRatio is "1.0", then the device is considered a medium density (mdpi) device and default scaling is not applied to the web page; if the value is "1.5", then the device is considered a high density device (hdpi) and the page content is scaled 1.5x; if the value is "0.75", then the device is considered a low density device (ldpi) and the content is scaled 0.75x.

Then using this, you calculate the physical size by dividing this by the total number of pixels, which can be calculated with window.screen.width and window.screen.height (Don't use window.screen.availHeight or window.screen.availWidth because these only detect the available height).

For more information:

• Android Webview Reference
• MDN - Screen.width
• MDN - Screen.height
• devicePixelRatio Explanation