title: Twitter Bootstrap 800px tablet media query issue?
body: <p>I'm currently building a site with bootstraps responsive layout which I have working fine in my browser but for some reason when I view the same site on my Nexus 7 tablet (Screen 1200 x 800) in portrait format the site renders with the media query @media (max-width: 767px) instead of @media (min-width: 768px) and (max-width: 979px).</p>
  
  <p>Interestingly I checked this out on bootstraps [example sites][1] and exactly the same thing happens even though the screen size is big enough for the @media (min-width: 768px) and (max-width: 979px) media query.  The correct query is loaded when the tablet is in landscape format.</p>
  
  <p>Here's bootstraps break points.</p>
  
  <pre><code>/* Large desktop */
  @media (min-width: 1200px) { ... }
  
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }
  
  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }
  
  /* Landscape phones and down */
  @media (max-width: 480px) { ... }
  </code></pre>
  
  <p>Is there anything I can do to make sure the correct media query is picked up by the tablet?</p>