title: android @media query width issue
body: <p>I read a nice article on @media queries and now I'm trying to use them to format my site based on the browser width.  When I test on my Android phone (Android 4.0 browser) it seems to be giving a width of 800 pixels when the actual width is 480. 800 would be the width if the phone is rotated landscape.  What is the right way to detect the current width in CSS?</p>
  
  <pre><code>The CSS I used for testing:
  
  @media all and (max-width: 800px) {
      div.testit800 {
      display: block;
      }
  }
  
  @media all and (max-width: 799px) {
      div.testit799 {
      display: block;
      }
  }
  
  @media all and (max-width: 768px) {
      div.testit768 {
      display: block;
      }
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="testit800"&gt;
      max width 800
  &lt;/div&gt;
  &lt;div class="testit799"&gt;
      max width 799
  &lt;/div&gt;
  &lt;div class="testit768"&gt;
      max width 768
  &lt;/div&gt;
  </code></pre>
  
  <p>The Android always shows:
  max width 800 regardless of the orientation.</p>
  
  <p>Update: I found <a href="http://responsejs.com/labs/dimensions/" rel="nofollow">this page</a> that demonstrates several javascript ways of detecting width.
  window.outerWidth seems to work for Android. Would it be generally reliable across devices and browsers?  I realize I would would have to give up on the @media queries to use it.</p>