rem.js

最新推荐文章于 2023-03-20 15:46:24 发布

小仙女儿

最新推荐文章于 2023-03-20 15:46:24 发布

阅读量758

点赞数

分类专栏： javascript 文章标签： javascript 自适应移动端 dpr

本文链接：https://blog.csdn.net/zula1994/article/details/75024153

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

rem 完全适配移动端

(function (doc, win) {
    console.log("dpr:" + win.devicePixelRatio);
    var docEle = doc.documentElement,
        isIos = navigator.userAgent.match(/iphone|ipod|ipad/gi),
        dpr = Math.min(win.devicePixelRatio, 3);
    scale = 1 / dpr,

        resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEle.dataset.dpr = dpr;

    var metaEle = doc.createElement('meta');
    metaEle.name = 'viewport';
    metaEle.content = 'user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale;
    docEle.firstElementChild.appendChild(metaEle);

    var recalCulate = function () {
        var width = docEle.clientWidth;
        if (width / dpr > 640) {
            width = 640 * dpr;
        }
        docEle.style.fontSize = 20 * width / 750 + 'px';

    };

    recalCulate();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, recalCulate, false);
})(document, window);