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

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

• We build a solid first version of your product
• We train your development team
• We rescue your project in trouble

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