title: Android screen size detection in javascript or css - not getting what I'm expecting
body: <p>I'm trying to apply css based on the screen size of an android device.</p>
  
  <p>using media query:</p>
  
  <pre><code>@media all and (max-device-width: 480px) {
      //apply css style to devices of screens with width no larger than 480px
  
  }
  </code></pre>
  
  <p>and javascript:</p>
  
  <pre><code>window.innerWidth
  window.innerHeight
  screen.width
  screen.height
  </code></pre>
  
  <p>with or without the meta tag:</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, initial-scale=1, user-scalable=no"/&gt; 
  </code></pre>
  
  <p>But none is working, I'm keep getting invalid(or valid, but not what I'm expecting) values for different android devices
  (the 'screen.width' and 'window.innerWidth'  always shows 320px, even when I'm using devices of sizes 240X320, 320X480 and 480X800). </p>
  
  <p>How can I detect the actual physical size of android devices?</p>
  
  <p>Thanks</p>