通过改变viewport 实现网站自适应

     var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth/640;
    var userAgent = navigator.userAgent;   
    var index = userAgent.indexOf("Android");
    if(index >= 0){  
    var androidVersion = parseFloat(userAgent.slice(index+8));
        if(androidVersion>2.3){
            $("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
        }else{
            $("head").eq(0).append("<meta name='viewport' content='width=640, target-densitydpi=device-dpi'>");
        }

    }else{
        $("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
    }

 2. 使用rem实现自适应http://caibaojian.com/web-app-rem.html

3.优化js

(function(a, d) {
        var b = a.documentElement,
            e = "orientationchange" in window ? "orientationchange" : "resize",
            c = function() {
                var a = b.clientWidth;
                a && (b.style.fontSize = Math.min(a, 640) / 320 * 100 + "px")
            };
            css = document.createElement('style');
            css.type="text/css";
            css.innerHTML = "html {font-size:"+Math.min(b.clientWidth, 640) / 320 * 100+"px}";
            a.getElementsByTagName('head')[0].appendChild(css);
        a.addEventListener && (d.addEventListener(e, c, !1), a.addEventListener("DOMContentLoaded", c, !1));
    })(document, window);

 

posted @ 2016-01-26 16:13  还能再菜点吗?  阅读(507)  评论(0编辑  收藏  举报