title: Get the device width in javascript
body: <p><strong>Is there a way to get the users device width, as opposed to viewport width, using javascript?</strong> </p>
  
  <p>CSS media queries offer this, as I can say</p>
  
  <pre><code>@media screen and (max-width:640px) {
      /* ... */
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>@media screen and (max-device-width:960px) {
      /* ... */
  }
  </code></pre>
  
  <p>This is useful if I'm targeting smartphones in landscape orientation. For example, on iOS a declaration of  <code>max-width:640px</code> will target both landscape and portrait modes, even on an iPhone 4. This is not the case for Android, as far as I can tell, so using device-width in this instance successfully targets both orientations, without targeting desktop devices.</p>
  
  <p><strong>However</strong>, if I'm invoking a javascript binding based on device width, I appear to be limited to testing the viewport width, which means an extra test as in the following,</p>
  
  <pre><code>if ($(window).width() &lt;= 960 &amp;&amp; $(window).height &lt;= 640) { /* ... */ }
  </code></pre>
  
  <p>This doesn't seem elegant to me, given the hint that device width is available to css.</p>