public
Last active

pixel normalization

  • Download Gist
normalized.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
<!doctype html>
 
<html>
<head>
<!-- Encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<title>normalization test normalized</title>
 
<style>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:default}article,aside,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit;text-decoration:inherit}
html {
font-size: 16px;
}
/* Using a new pixel ratio of 6/5 */
/* Standard 7" 1024x600 tablet (KINDLE FIRE) */
@media
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait),
screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape),
screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) {
html { font-size: 19.2px; } /* 16px x (6/5) */
}
 
/* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) */
/* Because we have a solid device-pixel-ratio we can avoid the device height */
@media
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (-o-device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait),
screen and (device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape),
screen and (device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait) {
html { font-size: 12.8px; } /* 16px x (2/3) x (6/5) */
}
h1, h2, h3 {
line-height: 2em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
</style>
<!-- Scaling and mobile behavior -->
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
 
</head>
<body>
<h1>H1 at 3em on a base of 16px</h1>
<h2>H2 at 2em on a base of 16px</h2>
<h3>H3 at 1em on a base of 16px</h3>
</body>
</html>
standard.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
<!doctype html>
 
<html>
<head>
<!-- Encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>
<title>normalization test control</title>
 
<style>
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:default}article,aside,figure,footer,header,hgroup,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;color:inherit;text-decoration:inherit}
html {
font-size: 16px;
}
h1, h2, h3 {
line-height: 2em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1em;
}
</style>
<!-- Scaling and mobile behavior -->
<meta name="viewport" content="width = device-width, height = device-height, maximum-scale=1.0, minimum-scale=1.0" />
 
</head>
<body>
<h1>H1 at 3em on a base of 16px</h1>
<h2>H2 at 2em on a base of 16px</h2>
<h3>H3 at 1em on a base of 16px</h3>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.