gistfile1.css

/* 
To size fonts we have to take into account the screen width and pixel density.
Assorted screen sizes and pixels per inch:
               x_px   y_px   PPI
               -----------------
G1             320    480    180
Nexus S        480    800    233
Iphone 4S      640    960    326
Iphone 5       640    1136   326
Ipad 2         768    1024   132
Retina Ipad    1536   2048   264
Desktop        1920   1080   96

  0..192 DPI: 'normal dpi'
193..288 DPI: 'med dpi'
    >288 DPI: 'high dpi'
*/

/* Normal dpi,  <481px. 
G1 */
@media 
only screen 
and (-webkit-max-device-pixel-ratio: 2) 
and (max-width:480px), 
only screen 
and (max-resolution: 192dpi)
and (max-width:480px)
{
  html{ font-size:45px;}
  body{ width:100%; }
  body{ background-color:black;}
}

/* Normal DPI, 481 - 800px. 
Ipad 2 portrait, narrow window on computer screen*/
@media 
only screen 
and (-webkit-max-device-pixel-ratio: 2)
and (min-width:481px)
and (max-width:800px),
only screen 
and (max-resolution: 192dpi)
and (min-width:481px)
and (max-width:800px)
{
  html{ font-size:23px;}
  body{ width:100%; }
  body{ background-color:red;}
}

/* Normal dpi, >800px. 
Ipad 2 landscape; computer screen  */
@media 
only screen 
and (min-width:801px)
and (-webkit-max-device-pixel-ratio: 2),
only screen 
and (min-width:801px)
and (max-resolution: 192dpi)
{
  html{ font-size:20px;}
  body{ width:800px; margin:auto; }
}



/* Med dpi,  <481px.  Nexus S portrait.*/
@media 
only screen 
and (max-width:480px)
and (-webkit-min-device-pixel-ratio: 2.01)
and (-webkit-max-device-pixel-ratio: 3),
only screen 
and (max-width:480px)
and (min-resolution: 193dpi)
and (max-resolution: 288dpi)
{
  html{ font-size:30px;}
  body{ width:100%; }
  body{ background-color:blue;}
}
/* Med DPI, 481 - 800px. 
Nexus S landscape */
@media 
only screen 
and (min-width:481px)
and (max-width:800px)
and (-webkit-min-device-pixel-ratio: 2.01)
and (-webkit-max-device-pixel-ratio: 3),
only screen 
and (min-width:481px)
and (max-width:800px)
and (min-resolution: 193dpi)
and (max-resolution: 288dpi)
{
  html{ font-size:31px;}
  body{ width:100%; }
  body{ background-color:green;}
}

/* Med dpi, >800px. 
Retina Ipad  */
@media 
only screen 
and (min-width:801px)
and (-webkit-min-device-pixel-ratio: 2.01)
and (-webkit-max-device-pixel-ratio: 3),
only screen 
and (min-width:801px)
and (min-resolution: 193dpi)
and (max-resolution: 288dpi)
{
  html{ font-size:32px;}
  body{ width:1200px; margin:auto; }
}



/* High dpi,  <= 640px. Iphone 4S/5 portrait*/
@media 
only screen 
and (max-width:640px)
and (-webkit-min-device-pixel-ratio: 3.01),
only screen 
and (max-width:640px)
and (min-resolution: 289dpi)
{
  html{ font-size:45px;}
  body{ width:100%; }
}
/* High DPI, 640 - 1600px. 
Iphone 4S/5 landscape, retina ipad portrait */
@media 
only screen 
and (min-width:640px)
and (max-width:1600px)
and (-webkit-min-device-pixel-ratio: 3.01),
only screen 
and (min-width:640px)
and (max-width:1600px)
and (min-resolution: 289dpi)
{
  html{ font-size:46px;}
  body{ width:100%; }
}

/* High dpi, >1600px. 
Retina Ipad portrait */
@media 
only screen 
and (min-width:801px)
and (-webkit-min-device-pixel-ratio: 3.01),
only screen 
and (min-width:801px)
and (min-resolution: 289dpi)
{
  html{ font-size:47px;}
  body{ width:1200px; margin:auto; }
}