title: Correct queries for screen widths and device resolutions
body: <p>Perhaps someone can shed some light on something for me.</p>
  
  <p>I'm basically trying to make sense of this device dimension list in terms of how to properly set up queries as well as maybe even detecting for and loading resources via javascript. <a href="http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/" rel="nofollow">http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/</a></p>
  
  <p>What's mostly throwing me off are the devices with very high PPI like retina Iphones and ipads.</p>
  
  <p>As an example 1st and 2nd Gen iPads have a resolution of 768 x 1024 in portrait. So does the new iPad Mini. So assuming the query are only using, say min-width-768, it's going to load the exact same CSS for each device even though the Mini is smaller, right?</p>
  
  <p>The iPad 3 has a portrait of 1536 x 2048. So using only min-width queries is this device going to get served up basically a large browser layout? Does the scale factor in the meta viewport tag play a role? Do the queries need to take into account pixel-aspect-ratio as well to correctly serve styles to high res devices?</p>
  
  <p>Anybody have a setup that has worked well for the sea of device resolutions out there? </p>