title: Android browser's screen.width, screen.height & window.innerWidth & window.innerHeight are unreliable
body: <p>I'm working on a web app that is targeted to browsers on desktop, tablet and smartphone.</p>
  
  <p>The web app has a light box implemented using <a href="http://www.jacklmoore.com/colorbox" rel="noreferrer">Colorbox</a> with an <code>iframe</code>. When the browser window is resized or the tablet/phone has it's orientation changed, Javascript code queries the window dimensions so that it can resize some elements of the light box.</p>
  
  <p>The issue I'm having is that everything works fine on desktop (Windows: IE, Firefox, Chrome, Mac: Safari), iPad &amp; iPhone but not on the Android smartphone (HTC) and Android Emulator.</p>
  
  <p>Android always returns different values for <code>screen.width</code>, <code>screen.height</code>, <code>window.innerWidth</code> &amp; <code>window.innerHeight</code> when they're queried from inside the window's resize event, which fires multiple times.</p>
  
  <p><strong>Why is the Android browser returning such a wide variance in values and how can I reliably detect the width and height of the browser window?</strong></p>