title: Get real width of Android mobile device after orientationchange
body: <p>It's really frustrating working with Android HTML5 and Javascript.</p>
  
  <p>This time, I try to find out what current screen size (width) when DOM is loaded AND when the user changes orientation:</p>
  
  <ul>
  <li><strong>screen.width</strong> works totally different on different AndroidOS-Versions. Impossible to use.</li>
  <li>jQuery's <strong>$(window).width()</strong> returns the real width but it fires before the orientation has changed. I tried it with a timeout of 200ms, doesn't work either.</li>
  </ul>
  
  <p>Then I tried this snippet: </p>
  
  <pre><code>var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
  
  if (navigator.userAgent.indexOf('Android') &gt;= 0 &amp;&amp; window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
  }
  </code></pre>
  
  <p>On some Android-Versions it changes by orientation, on some don't.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks!</p>
  
  <p>Edit / Solution:</p>
  
  <p>That is how it worked for me on Android and iOS:</p>
  
  <pre><code>$( window ).on( "orientationchange", function( event ) {
    //console.log( "This device is in " + event.orientation + " mode!" );
  
    var oc_timer;
    clearTimeout(oc_timer);
    oc_timer = setTimeout(function () {
      //do your magic stuff with jQuery's $(window).width()
    }, 500);
  );
  $( window ).orientationchange(); //fire it manually on page load
  </code></pre>