移动端自适应屏幕方案

现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。

通过一天的查找资料跟以前的经验，总结了以下的方案：

1：前端样式固定用320px宽度做，左右留白，背景用颜色或者背景填充。

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"/>

   图片用实际像素background-size: 100% 100%;

2：不写宽度，所有内容以中轴线为标准，左右铺开。

3：写好网页后用JS获取屏幕宽度，然后设置body:zoom（有时字体会有问题）或者scale（只适用于单页）缩放尺寸

4：参考淘宝方案http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold

设置html的font-size和viewport来控制大小

 

备注：关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip/dp/device independent pixels，设备独立像素）与屏幕密度有关

以下代码是以640px的设计图为例，用动态JS设置大小的代码

<script>
    (function(doc,win){
        var docEl=doc.documentElement,
        isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi),
        dpr=isIOS?Math.min(win.devicePixelRatio,3):1,
        scale=1/dpr,
        resizeEvt="orientationchange" in window?"orientationchange":"resize";
        docEl.dataset.dpr=dpr;

        var metaEl=doc.createElement("meta");
        metaEl.name="viewport";
        metaEl.content="initial-scale="+scale+",
        maximum-scale="+scale+", 
        minimum-scale="+scale;
        docEl.firstElementChild.appendChild(metaEl);

        var recalc=function(){
            var width=docEl.clientWidth;
            if(width/dpr>640){
                width=640*dpr
            }
            docEl.style.fontSize=100*(width/640)+"px"};
            recalc();
            if(!doc.addEventListener){return}
            win.addEventListener(resizeEvt,recalc,false)
    })(document,window);
    </script>

 比如：

以下代码是750px的设计图为例

头部直接定义<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

 <script type="text/javascript">
        "use strict";
        (function (e) {
            var i = 1, n = window.navigator.userAgent;
            var t = n.match(/iphone/i);
            var d = n.match(/yixin/i);
            var o = n.match(/Mb2345/i);
            var w = n.match(/mso_app/i);
            var a = n.match(/sogoumobilebrowser/gi);
            var r = n.match(/liebaofast/i);
            var s = n.match(/GNBR/i);
            function h() {
                var e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth, i, n;
                if (window.devicePixelRatio) {
                    i = window.devicePixelRatio
                } else {
                    i = t ? e > 818 ? 3 : e > 480 ? 2 : 1 : 1
                }
                if (t)e = screen.width;
                n = e > 1080 ? 144 : e / 7.5;
                n = n > 32 ? n : 32;
                window.screenWidth_ = e;
                window.htmlFontSize_ = n;
                if (d || o || w || a || r || s) {
                    setTimeout(function () {
                        e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth;
                        n = e > 1080 ? 144 : e / 7.5;
                        n = n > 32 ? n : 32;
                        document.getElementsByTagName("html")[0].dataset.dpr = i;
                        document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                    }, 500)
                } else {
                    document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                }
            }
            h()
        })(window.NEWAP = window.NEWAP || {});
    </script>

 

http://play.163.com/special/wow-guanying/