H5适配方式

H5适配方式

首先将如下代码 放置于<title>标签下面，当然你的自定义样式，在这之后引入即可，

然后你就可以使用和设计稿一样的px进行H5 布局，上手很easy再也不用什么rem了

    <style type="text/css">
        html {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        (function() {
            // var wr = window.innerWidth / window.innerHeight;
            var bcr = window.document.documentElement.getBoundingClientRect();
            var wr = bcr.width / bcr.height;
            var _width;
            if (wr > 750 / 1106) {
                _width = Math.floor(wr * 1106);
            } else {
                _width = 750;
            }
            var ua = navigator.userAgent;
            if (/Android (\d+\.\d+)/.test(ua)) {
                var version = parseFloat(RegExp.$1);
                if (version > 2.3) {
                    document.write('<meta name="viewport" content="width=' + _width + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
                } else {
                    document.write('<meta name="viewport" content="width=' + _width + ',target-densitydpi=device-dpi">')
                }
            } else if (/QQAC_Client_iOS/.test(ua)) {
                document.write('<meta name="viewport" content="width=' + _width + ',maximum-scale=0.5,minimum-scale=0.5">');
            } else {
                document.write('<meta name="viewport" content="width=' + _width + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
            }
            var domEle = window.document.documentElement;
            var timeCode;
            var hwr = wr > 1 ? wr : (1 / wr)
            domEle.style.height = hwr * _width + "px";
            console.log(hwr * _width + "px")
            function resize() {
                domEle.style.height = hwr * _width + "px";
            }
            window.addEventListener("resize", function() {
                clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
            }, false);
            window.addEventListener("pageshow", function(b) {
                b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
            }, false);
            resize();
        })();
    </script>