h5 端自适应显示屏宽度，更改body html字体，为rem使用做准备的js代码

本文主要是介绍h5 端自适应显示屏宽度，更改body html字体，为rem使用做准备的js代码，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

/**
 * Created by lvlq on 16/1/29.
 */
!function (N, M) {
    function L() {
        var a = I.getBoundingClientRect().width;
        a / F > 2000 && (a = 2000 * F);
        var d = a / 10;
        I.style.fontSize = d + "px", D.rem = N.rem = d
        var nod = document.createElement("style");
        nod.type = 'text/css';
        nod.appendChild(document.createTextNode("body{opacity:0;}"));
        document.documentElement.firstElementChild.appendChild(nod);
        window.addEventListener("load", function () {
            document.body.style.opacity = 1;
        }, false);
    }

    var K,
        J = N.document,
        I = J.documentElement,
        H = J.querySelector('meta[name="viewport"]'),
        G = J.querySelector('meta[name="flexible"]'),
        F = 0,
        E = 0,
        D = M.flexible || (M.flexible = {});
    if (H) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        C && (E = parseFloat(C[1]), F = parseInt(1 / E))
    } else {
        if (G) {
            var B = G.getAttribute("content");
            if (B) {
                var A = B.match(/initial\-dpr=([\d\.]+)/), z = B.match(/maximum\-dpr=([\d\.]+)/);
                A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2)))
            }
        }
    }
    if (!F && !E) {
        var y = N.navigator.userAgent,
            x = !y.match(/android/gi),
            // w = x && !!y.match(/OS 9_3/),
            w = x && false,
            v = N.devicePixelRatio;
        F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
    }
    if (I.setAttribute("data-dpr", F), !H) {
        if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
            I.firstElementChild.appendChild(H)
        } else {
            var u = J.createElement("div");
            u.appendChild(H), J.write(u.innerHTML)
        }
    }
    N.addEventListener("resize", function () {
        clearTimeout(K), K = setTimeout(L, 300)
    }, !1), N.addEventListener("pageshow", function (b) {
        b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
    }, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function () {
        J.body.style.fontSize = 12 * F + "px"
    }, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function (d) {
        var c = parseFloat(d) * this.rem;
        return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
    }, D.px2rem = function (d) {
        var c = parseFloat(d) / this.rem;
        return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
    }
}(window, window.lib || (window.lib = {}));

这篇关于h5 端自适应显示屏宽度，更改body html字体，为rem使用做准备的js代码的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！