title: Media Query Stylesheets
body: <p>I have 2 different stylesheets for my website, one for desktops and one for phones and tablets with all <code>:hover</code> functions disabled. I tried to use the the bootstrap media query definitions, but the desktop will show on some high-end phones, how could I address it?</p>
  
  <p>this is my definitions for now:</p>
  
  <pre><code>&lt;!-- IPHONE 4--&gt;
     &lt;link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="/styles-basic.css" /&gt;
  &lt;!-- IPHONE 5--&gt;
     &lt;link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" type="text/css" href="/styles-basic.css" /&gt;
  &lt;!-- PHONES E TABLETS --&gt;
     &lt;link rel="stylesheet" href="/styles-basic.css" media="screen and (max-width:979px)"&gt;
  &lt;!-- DESKTOP --&gt;
     &lt;link rel="stylesheet" href="/styles.css" media="screen and (min-width:978px)"&gt;
  </code></pre>