title: Media Queries: How to target only tablet?
body: <p>I have been doing some research on media queries and I understand the concept of mobile-first design. </p>
  
  <p>I know, that there are lots of questions regarding media queries but none of them targets my specific question.</p>
  
  <p>Also I understand the concept of structuring your stylesheets with media queries like this:</p>
  
  <pre><code>/* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) { ... }
  
  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) { ... }
  
  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) { ... }
  </code></pre>
  
  <p>However I really need a way for my stylesheets to <strong>target only tablets</strong> regardless of the browser resolution (width &amp; height). Checking the browser-width is simply not safe enough (and definitely not what I am searching for) in 2015 where some tablets have a bigger resolution than older desktops.</p>
  
  <p>Here is a list of things I have tried so far:</p>
  
  <ol>
  <li>I made a list of "common" tablet-resolutions and simply specified
  detailed media queries. This approach failed after I found tablets
  with 1024px width (which is the same as older desktop browsers).</li>
  <li>I read a lot about media queries and found out that modern browsers (especially on tablets) sometimes ignore specifications like "@media only screen" and that most values of a media query are <a href="http://www.w3schools.com/cssref/css3_pr_mediaquery.asp" rel="nofollow">deprecated</a>.</li>
  </ol>
  
  <p><strong>1.) Is there a safe way to target tablets regardless of their resolution with media queries?</strong>  </p>
  
  <p><strong>2.) Is there any way to use JavaScript/JQuery to find out if the Browser is used on a Tablet (touchscreen)?</strong></p>
  
  <p>Maybe there is a certain css property OR JavaScript function that is only "triggered" on tablets (I am out of ideas)? Thank you for your help.</p>