安蝶

前端学习ing
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
手机端 设置html上font-size的值 使用rem

在head标签上加入：

(function() {
    var b = navigator.userAgent;
    ipad = b.match(/(iPad).*OS\s([\d_]+)/) ? true : false;
    iphone = !ipad && b.match(/(iPhone\sOS)\s([\d_]+)/) ? true : false;
    uc = navigator.userAgent.indexOf("UCBrowser") > -1 ? true : false;
    ios = ipad || iphone;
    var d = 1,a = 1,c;
    if (ios) {
        if (window.devicePixelRatio >= 2) {
            d *= 0.5;
            a *= 2
        }
    } else {
        if (uc) {
            if (window.devicePixelRatio >= 2) {
                d *= 0.5;
                a *= 2
            }
        }
    }
    c = '<meta name="viewport" content="initial-scale=' + d + ", maximum-scale=" + d + ", minimum-scale=" + d + ', width=device-width, user-scalable=no" />';
    document.write(c);
    document.documentElement.style.fontSize = 20 * a + "px"
})();

那么html上会根据手机的不同设置不同的font-size值，比如:<html style="font-size:20">，那么1rem=20px

posted on 2015-09-02 17:31  安蝶  阅读(785)  评论(0)  编辑  收藏  举报