title: CSS Media Queries on Nexus 7, display resolution not working in code
body: <p>I'm working with CSS Media Queries to load different templates for differently sized devices. I created a spreadsheet listing the display resolution of testing devices and the most common devices to come up with the size cut-offs. One of the devices that I'm testing is the Nexus 7 of which I've found the display resolution to be 1280 × 800. However when I use these values in my code, it doesn't work. </p>
  
  <p>**the only reason I'm using no max or min is because I'm trying to find the exact resolution. If I replace with max-device-width with something rather large, it works and I've done enough testing to know that it works with various max values given but in order to properly complete my code to differentiate between 3 differently-sized device categories, I have to make sure I'm creating the right cut-offs. Is CSS resolution different? Thanks for any and all help in advance!</p>
  
  <pre><code>@media only screen and (device-width:1280px) and (orientation:landscape) {
  /*style --code removed for sack of space */
  } 
  
  @media only screen and (device-width:800px) and (orientation:portrait) {
  
  /*style --code removed for sack of space */
  
  }    
  </code></pre>
  
  <p>Here is my viewport code in my html file</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
  </code></pre>