h5布局之道（最终篇）

大家好，时隔一年多了，前几篇探讨的rem布局后来又有改进不过一直没有想起来更新博客，rem布局淘宝用的也比较早，有兴趣的可以看看淘宝的flexible

,我的用法比较简单，原来一样，废话不说了直接上代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no"/>
        <title>GreatBoy</title>
        <style>
            /*-----css Reset end-----*/
            body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
                margin:0;
                padding:0px;
            }
            html{
/*                display: none;*/
            }
            body{
                font-size: 14px;
            }
            .nav img{
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="nav"><img src="http://p1.jmstatic.com/banner/75/mobile_app/24326_0.jpg"/></div>
        <div id="container">
            <div id="user">用户信息<span id="userinfo"></span></div>
        </div>
        <script>
        (function(win) {
            var doc = win.document,
                scale = 16,
                $body = doc.getElementsByTagName('body')[0],
                $html = doc.getElementsByTagName('html')[0],
                windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth,
                windowHeight = document.documentElement && document.documentElement.clientHeight || documentElement.body.clientHeight || window.innerHeight,
                deviceAgent = navigator.userAgent.toLowerCase();
            if ( deviceAgent.match( /(iphone|ipod|ipad|android|windows\s*phone|symbianos)/ ) ) {
                try{
                   // if ( window.localStorage && window.localStorage.getItem('scale_greatboy') ) {
                    //    scale = window.localStorage.getItem('scale_greatboy');
                   // } else {
                        scale = parseFloat(windowWidth * 16 / (16*3.2));
                        if (windowHeight > windowWidth) {
                            //window.localStorage && window.localStorage.setItem('scale_greatboy', scale);
                        }
                   // }
                }catch(e){
 
                }
                if (deviceAgent.match(/android\s*2.3/) && deviceAgent.match(/micromessenger/)) {
                    scale = 16;
                }
                $html.style.fontSize = scale + 'px';
                $html.style.display = 'block';
            } else {
                window.onresize = function(){
                    windowWidth = doc.documentElement && doc.documentElement.clientWidth || doc.body.clientWidth || win.innerWidth;
                    scale = parseFloat(windowWidth * 16 / (16*3.2));
                    $html.style.fontSize = scale + 'px';
                };
                scale = parseFloat(windowWidth * 16 / (16*3.2));
                $html.style.fontSize = scale + 'px';
                $html.style.display = 'block';
            }
            $body.style.width = '3.2rem';
        })(window);
 </script>
    </body>
</html>