title: CSS pixel and optical sizes with new screen resolutions (such as Retina)
body: <p>I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.</p>
  
  <p>So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.</p>
  
  <p>I looked into this and it appears that the solution detects the DPI and then loads different CSS. </p>
  
  <pre><code>@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
      /* Retina-specific stuff here */
  }
  </code></pre>
  
  <p>The thing is these screens all have different DPIs.</p>
  
  <pre><code>iPhone 4/4S and iPod Touch (4th generation) -- 326  
  iPad (3rd)/4th generation)  -- 264  
  MacBook Pro with Retina Display 15" -- 220
  MacBook Pro with Retina Display 13" -- 227
  </code></pre>
  
  <p>So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.</p>