Created
February 6, 2013 17:52
-
-
Save therealplato/4724432 to your computer and use it in GitHub Desktop.
pixel density media query problem
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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), | |
(max-resolution: 192dpi) | |
and (max-width:480px) | |
{ | |
html{ font-size:22px;} | |
body{ width:100%; } | |
} | |
/* Normal DPI, 481 - 800px. | |
Ipad 2 portrait, narrow window on computer screen*/ | |
@media only screen | |
and (-webkit-max-device-pixel-ratio: 2), | |
(max-resolution: 192dpi) | |
and (min-width:481px), | |
and (max-width:800px) | |
{ | |
html{ font-size:23px;} | |
body{ width:100%; } | |
} | |
/* Normal dpi, >800px. | |
Ipad 2 landscape; computer screen */ | |
@media only screen | |
and (-webkit-max-device-pixel-ratio: 2), | |
(max-resolution: 192dpi) | |
and (min-width:801px) | |
{ | |
html{ font-size:24px;} | |
body{ width:800px; margin:auto; } | |
} | |
/* Med dpi, <481px. Nexus S portrait.*/ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 2.01), | |
(min-resolution: 193dpi) | |
and (-webkit-max-device-pixel-ratio: 3), | |
(max-resolution: 288dpi) | |
and (max-width:480px) | |
{ | |
html{ font-size:30px;} | |
body{ width:100%; } | |
} | |
/* Med DPI, 481 - 800px. | |
Nexus S landscape */ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 2.01), | |
(min-resolution: 193dpi) | |
and (-webkit-max-device-pixel-ratio: 3), | |
(max-resolution: 288dpi) | |
and (min-width:481px), | |
and (max-width:800px) | |
{ | |
html{ font-size:31px;} | |
body{ width:100%; } | |
} | |
/* Med dpi, >800px. | |
Retina Ipad */ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 2.01), | |
(min-resolution: 193dpi) | |
and (-webkit-max-device-pixel-ratio: 3), | |
(max-resolution: 288dpi) | |
and (min-width:801px) | |
{ | |
html{ font-size:32px;} | |
body{ width:1200px; margin:auto; } | |
} | |
/* High dpi, <= 640px. Iphone 4S/5 portrait*/ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 3.01), | |
(min-resolution: 289dpi) | |
and (max-width:640px) | |
{ | |
html{ font-size:45px;} | |
body{ width:100%; } | |
} | |
/* High DPI, 640 - 1600px. | |
Iphone 4S/5 landscape, retina ipad portrait */ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 3), | |
(min-resolution: 289dpi) | |
and (min-width:481px) | |
and (max-width:800px) | |
{ | |
html{ font-size:46px;} | |
body{ width:100%; } | |
} | |
/* High dpi, >800px. | |
Retina Ipad, landscape iphone 4S/5 */ | |
@media only screen | |
and (-webkit-min-device-pixel-ratio: 3), | |
(min-resolution: 289dpi) | |
and (min-width:801px) | |
{ | |
html{ font-size:47px;} | |
body{ width:1200px; margin:auto; } | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment