Detect effective horizontal pixel width on a mobile device with Javascript

So you want to find out how many horizontal pixels you have available on a mobile device. This is super difficult because:

Modern mobile devices have high-density displays Show archive.org snapshot where 1px in your CSS e.g. corresponds to 2.25, 4, ... physical pixels on the screen hardware.
Difficult APIs Show archive.org snapshot
Inconsistent APIs Show archive.org snapshot
Screen orientation can change when the user rotates her device

Many Bothan spies had to die for this code:

function effectiveDeviceWidth() {
  var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
  // iOS returns available pixels, Android returns pixels / pixel ratio
  // http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
  if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
  }
  return deviceWidth;
}

Henning Koch

makandra.de

Say thanks15

Last edit

2013-01-17

License

Source code in this card is licensed under the MIT License.

Posted by Henning Koch to makandra dev (2013-01-16 19:13)