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

Opscomplete powered by

Save money by migrating from AWS to our fully managed hosting in Germany.

• Trusted by over 100 customers
• Ready to use with Ruby, Node.js, PHP
• Proactive management by operations experts

Read more Show archive.org snapshot

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