Skip to content

Instantly share code, notes, and snippets.

@metaphox
Forked from scottkellum/normalized.html
Created January 23, 2012 10:03

Revisions

  1. @scottkellum scottkellum revised this gist Jan 18, 2012. 1 changed file with 16 additions and 2 deletions.
    18 changes: 16 additions & 2 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -21,13 +21,27 @@
    /* 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) {
    @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) {
    @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) */
    }

  2. @scottkellum scottkellum revised this gist Jan 18, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -21,13 +21,13 @@
    /* 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) {
    @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) {
    @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) */
    }

  3. @scottkellum scottkellum revised this gist Jan 9, 2012. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -18,14 +18,17 @@
    font-size: 16px;
    }

    /* Standard 7" 1024x600 tablet (KINDLE FIRE) -- 16px x (6/5) */
    @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (orientation: portrait) {
    html { font-size: 19.2px; }
    /* 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) {
    html { font-size: 19.2px; } /* 16px x (6/5) */
    }

    /* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) -- 16px x (2/3) 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) {
    html { font-size: 12.8px; }
    html { font-size: 12.8px; } /* 16px x (2/3) x (6/5) */
    }

    h1, h2, h3 {
    @@ -54,4 +57,4 @@ <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>
    </html>
  4. @scottkellum scottkellum revised this gist Jan 4, 2012. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -18,16 +18,16 @@
    font-size: 16px;
    }

    /* Standard 7" 1024x600 tablet -- 16px x (6/5) */
    @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) {
    html { font-size: 12.8px; }
    }

    /* 1024x600 tablet with pixel ratio of 3/2 -- 16px x (2/3) x (6/5) */
    /* Standard 7" 1024x600 tablet (KINDLE FIRE) -- 16px x (6/5) */
    @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (orientation: portrait) {
    html { font-size: 19.2px; }
    }

    /* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) -- 16px x (2/3) x (6/5) */
    @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) {
    html { font-size: 12.8px; }
    }

    h1, h2, h3 {
    line-height: 2em;
    }
  5. @scottkellum scottkellum revised this gist Jan 2, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -19,12 +19,12 @@
    }

    /* Standard 7" 1024x600 tablet -- 16px x (6/5) */
    @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait) {
    @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) {
    html { font-size: 12.8px; }
    }

    /* 1024x600 tablet with pixel ratio of 3/2 -- 16px x (2/3) x (6/5) */
    @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) {
    @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (orientation: portrait) {
    html { font-size: 19.2px; }
    }

  6. @scottkellum scottkellum revised this gist Dec 6, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion standard.html
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"></meta>


    <title>normalization test normalized</title>
    <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}
  7. @scottkellum scottkellum created this gist Dec 6, 2011.
    57 changes: 57 additions & 0 deletions normalized.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <!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;
    }

    /* Standard 7" 1024x600 tablet -- 16px x (6/5) */
    @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (max-device-height: 400px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (max-device-height: 683px) and (orientation: portrait) {
    html { font-size: 12.8px; }
    }

    /* 1024x600 tablet with pixel ratio of 3/2 -- 16px x (2/3) x (6/5) */
    @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) {
    html { font-size: 19.2px; }
    }

    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>
    47 changes: 47 additions & 0 deletions standard.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,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 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;
    }

    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>