移动端rem布局，页面加载瞬间未恢复正常

最新推荐文章于 2023-09-26 16:01:47 发布

晶晶晶晶晶

最新推荐文章于 2023-09-26 16:01:47 发布

阅读量560

点赞数 2

分类专栏： javascript

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了移动端使用rem布局时，元素加载过程中出现大小变化的问题。通过调整js加载顺序、预隐藏body及设置定时器，有效解决了加载过程中的布局闪烁现象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。

(function (doc, win) {
    var docEl = doc.documentElement,
        isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
        dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
        dpr = 1,
        scale = 1 / dpr,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEl.dataset.dpr = dpr;
    var metaEl = doc.createElement('meta');
    metaEl.name = 'viewport';
    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
    docEl.firstElementChild.appendChild(metaEl);
    var recalc = function () {
        var width = docEl.clientWidth;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        // 乘以100，px : rem = 100 : 1
        docEl.style.fontSize = 100 * (width / 750) + 'px';
    };
    recalc()
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
})(document, window);

在完成整个页面的时候，我们在手机就看到了加载元素会先变小后恢复正常。

1.js加载顺序与加载方法
页面加载顺序通常是“从上往下”加载的，所以把上面这段代码发在head内，但还是出现上述问题。在网上也查找一些资料，换成原生写法，优化加载，可以加快body的显示。上述问题完美解决。

原生写法

2.进行body进行预先隐藏处理
这里为什么不用display？display设置none是直接移除元素，而visibility设置的hidden只是将元素隐藏，保留其原本的位置。

3.设置定时器setTimeout
定时器在加载方法1毫秒之后，对body进行visible，这1毫秒的时候我基本是可以忽视。

---------------------
作者：maggie_live
来源：优快云
原文：https://blog.youkuaiyun.com/maggie_live/article/details/80262312