码迷,mamicode.com
首页 > 其他好文 > 详细

根据UA动态设置font-size

时间:2019-01-29 18:18:26      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:attribute   else   out   data-   gen   useragent   size   cal   页面   

根据html的font-size使用rem来优化移动端页面

(function () {
    var h = window,
        m = document;
    var c = m.documentElement,
        a = h.navigator.userAgent,
        k = c.querySelector(‘meta[name="viewport"]‘),
        n = 0,
        d = 0,
        o = 100,
        f = {},
        e;
    if (!n && !d) {
        var j = a.match(/android/gi),
            i = a.match(/iphone/gi),
            l = h.devicePixelRatio;
        if (i) {
            if (l >= 3 && (!n || n >= 3)) {
                n = 3;
            } else {
                if (l >= 2 && (!n || n >= 2)) {
                    n = 2;
                } else {
                    n = 1;
                }
            }
        } else {
            n = 1;
        }
        d = 1 / n;
    }
    c.setAttribute("data-dpr", n);
    if (k) {
        var g = k.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        if (g) {
            d = parseFloat(g[1]);
            n = parseInt(1 / d);
        }
    }
    if (!k) {
        k = m.createElement("meta");
        k.setAttribute("name", "viewport");
        k.setAttribute("content", "initial-scale=" + d + ", maximum-scale=" + d + ", minimum-scale=" + d +
            ", user-scalable=no");
        if (c.firstElementChild) {
            c.firstElementChild.appendChild(k);
        } else {
            var b = m.createElement("div");
            b.appendChild(k);
            m.write(b.innerHTML);
        }
    }
    refreshRem = function () {
        var p = c.clientWidth;
        if (!p) {
            return;
        }
        f.fontSize = 100 * (p / 375);
        var z = f.fontSize;
        z = z >= 144 ? 144 : z;
        c.style.fontSize = z + "px";
    };
    h.addEventListener("resize", function () {
        clearTimeout(e);
        e = setTimeout(refreshRem, 300);
    }, false);
    h.addEventListener("pageshow", function (p) {
        if (p.persisted) {
            clearTimeout(e);
            e = setTimeout(refreshRem, 300);
        }
    }, false);
    refreshRem();
})();

根据UA动态设置font-size

标签:attribute   else   out   data-   gen   useragent   size   cal   页面   

原文地址:https://www.cnblogs.com/ljwk/p/10334171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!