7

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.

hkk
  • 2,069
  • 1
  • 23
  • 48
Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435
  • possible duplicate of [Shouldn't window.screen.width/height correspond to actual screen width/height?](http://stackoverflow.com/questions/3702073/shouldnt-window-screen-width-height-correspond-to-actual-screen-width-height) – Shadow The GPT Wizard Apr 22 '13 at 07:36
  • 2
    It's not duplicate, I am asking physical dimensions, not pixel dimensions – Mikko Ohtamaa Apr 22 '13 at 08:08
  • That's an interesting question. But why should a device tell its physical dimensions? – Michael Sazonov Apr 22 '13 at 08:11
  • 1
    JavaScript [can't do that](http://stackoverflow.com/q/12051071/447356) – Shadow The GPT Wizard Apr 22 '13 at 08:12
  • @ShadowWizard There's no API, but you can do calculations that get pretty close. – hkk Jan 03 '14 at 23:43
  • 2
    @MichaelSazonov without knowing the phyisical dimensions a `` might be displayed either too big or too small, for being ergonomically easy for the user to press, for instance. In short, only knowing how much space you have will allow to make good User Interfaces. – humanityANDpeace Aug 25 '16 at 15:48
  • 2
    @humanityANDpeace Yes and this literally is wrecking my API because it *requires* knowing real screen DPI to do just that. This is 2019, I'm not asking for a flying car here... – Michael May 06 '19 at 23:54

2 Answers2

4

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:

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:

Community
  • 1
  • 1
hkk
  • 2,069
  • 1
  • 23
  • 48
  • 1
    the problem with pixels is that two phones can have drastically different pixel resolutions: iphone6: 320x568 BUT galaxy note III: 1920 x 1080 ... unless I am missing something, targeting pixels will not be helpful .. – dsdsdsdsd Feb 15 '16 at 18:41
  • @dsdsdsdsd I'm aware of that. But you can account for pixel density to find the physical display size. – hkk Feb 16 '16 at 00:44
  • 1
    Am I the only one who thinks it's weird that in 2017 we still don't have a direct way to get the physical screen size or draw something exactly X centimeters wide, for instance? – Andy Mar 03 '17 at 17:42
  • Media queries say my screen is at 96dpi... problem is, if I actually calculate it by dividing resolution by screen dimensions, I get 157dpi, which is a *big* difference. The value `window.devicePixelRatio` is `1` so there is no indication that resolution is not accurate. What is the reason for this discrepancy, and how to deal with it? – Michael May 06 '19 at 23:05
  • I have been working on a solution for this for a while and (after a LOT of testing) I think I have found a shortcut through the maths. Try: https://www.hyperspaces.co.uk/device/ I'd be interested to hear if it works for you (use the link on the page) Code currently obfuscated and domain locked while in beta. – TJS101 Sep 07 '22 at 15:02
-4

better to use CSS

@media screen and (max-width: 672px){
    //your code for mobile category
}
@media screen and (min-width: 672px){
    //your code for desktop category
}
eurica
  • 120
  • 2
  • 13