title: How to target only landscape mobile devices without affecting desktop via CSS?
body: <p>Is there a simple way to target landscape <strong>mobile</strong> devices without affecting desktop ones, without entering the screen size for every device?<br>
  If not, is there a single best resolution to target most of the users?<br>
  Nowadays mobile screens can have a resolution equal or grater than most desktop screens, I can't see why many use rules for resolutions below 640x480.</p>
  
  <p>For example, to target <em>portrait</em> devices (99% are mobile), one could write his rules in </p>
  
  <pre class="lang-css prettyprint-override"><code>/*Global and desktop rules*/
  
  @media only screen and (orientation: portrait) {
  /*Mobile overwrites*/
  }
  </code></pre>
  
  <p>However, the same query for <code>orientation: landscape</code> would affect desktop users as well.<br>
  My temporary workaround is to use <code>vw</code>, <code>vh</code> and <code>vmin</code>, but I would like to know if there's a better way.</p>
  
  <p>Would a <code>mobile</code> CSS media simplify web developers' job?</p>