解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）

最新推荐文章于 2024-11-24 14:52:55 发布
最新推荐文章于 2024-11-24 14:52:55 发布
阅读量7k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： js 文章标签： rem
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lily2016n/article/details/78285625
本文探讨了页面加载过程中出现的瞬间错乱现象，并提出了解决方案。通过调整JS代码的位置，确保在DOM元素加载之前计算好字体大小，从而避免加载过程中的视觉错乱。

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

页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决

我们知道页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。
所以我们应当把计算字体的js放在body之前

解决方法参考网址

移动端热点问题
MingL520的博客
05-31 595
像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“图像元素”之意，有时亦被称为pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更明快。//ppi是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度。
js 双指缩放，双指放大，双击放大，移动端双指放大缩小
07-11
双指缩放，图片双指缩放，在图片上有固定的坐标，并且点击固定坐标有相对应的事件触发，demo
【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题
asdfgh0077的博客
08-29 488
【问题解决】移动端rem适配的时候会出现打开页面时先缩小(放大)后恢复到正常页面的问题
移动端网页的缩放
Auroral_Su的博客
09-23 742
用vue框架开发了一个嵌入APP中的协议，部署以后，进入页面，发现页面中富文本的字体过小，查阅资料后发现要在index.html中设置一下。 以下是解决方法： vue生成的index.html页面中，meta标签是这样子的： 这里只要把meta标签改成以下内容，就可以控制页面的缩放 具体属性值分析： 　　　　width=device-width 使用设备的宽度来解析 　　　　initial-scale=1.0 页面初始倍数为1倍 　　　　maximum-scale=1.0
自适应：用JS做的自适应，是最差的自适应，记页面刷新前后尺寸变化
weixin_30542079的博客
11-23 328
今天遇到一个硬茬，我在使用weui重构一个页面时，出现一个问题：路由进入页面时，页面内容尺寸硬是会变大，刷新后又恢复正常： 项目背景：一个使用react-starter-kit构建的B端SPA项目 上图： 出现问题时的情况： 刷新后（它本应该的样子）： 折腾了一个下午，各种请教团队里的大神，原因如下： 在我的页面的上一个页面，也就是跳转过来的那个页面，用了这样的自适应...
移动端rem布局导致页面加载瞬间无样式
陈小穗子
11-14 4184
移动端rem布局导致页面加载瞬间无样式
H5 移动端 iOS 初次加载页面，整体缩小（meta 设置失效的缘故）
weixin_30872499的博客
07-11 1157
爬坑之旅 漫长孤寂 感谢信息时代 感谢巨人的肩膀 感慨完毕，回归正题 之前开始时，遇到个奇葩的问题，在ios移动端初次加载页面，都会出现整体缩小的情况 真的是第一次遇到，可能是经历不够丰富吧（走过的路太少了啊） 网上百度了一圈，各有说法， 交流群也问了一圈，回答竟然是不管 好吧，还是得自己想办法 排查完毕，锁定为metaviewport的设置失效 想想之前怎么没...
移动端Web页面适配方案（整理版）
weixin_57550930的博客
10-22 4785
主要分为：【百分比|rem|vw/vh|响应式设计】 介绍： 移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。 早期网页设计采用静态布局，通过<meta>标签中的applicable-device应用设备标识识别移动设备，即<meta name = 'applicable-device' content = 'mobile'>，在<meta&g
移动端布局
qq_56101688的博客
11-24 1009
移动端布局是指针对移动设备（如智能手机和平板电脑）设计的网页或应用程序的用户界面布局。由于移动设备的屏幕尺寸较小，与传统桌面电脑相比，它们在显示内容时有一些特殊的考虑因素。任何一个移动端的布局都要有viewpoint。
【移动端适配实战攻略】：px2rem助你应对多样分辨率挑战！
[【移动端适配实战攻略】：px2rem助你应对多样分辨率挑战！](https://www.atatus.com/blog/content/images/2023/02/em-vs-rem.png) # 摘要 随着移动互联网的迅猛发展，移动端适配已成为前端开发中不可或缺的重要...
rem使用后页面布局瞬间错乱的问题
xin00guang的博客
08-31 4097
  问题: 移动端项目中使用了rem.js, 里面的加载项为'load', 如果网络情况非常慢, 页面资源(如图片,视频)非常大,  就会造成rem.js暂时无效,  页面会瞬间没有样式. 因为此时,html的font-size并没有被改变, 1rem = 16px .   解决: 1.  在css中提前设置fon-size的大小 2. 将rem中执行的load换为DOMCon...
解决移动端rem+百分比布局加载瞬间页面错乱的方法
qq_31381917的博客
11-08 7568
以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！移动端布局有很多种，这里我最常使用到rem+ 百分比 的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。 页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决...
简单解决js计算rem单位首次加载页面瞬间布局错乱的问题
caimingxian401的博客
04-15 3947
在写移动端布局时，有些人喜欢用单纯的CSS+百分比来控制字体单位，而有些人则喜欢用js来计算字体的单位以及处理屏幕兼容。这种方法其实是挺不错的，比用媒体查询能减少能多的后期处理。但是相信用过这个方法的人不少都会发现，在我们首次打开页面的时候，有时会出现一闪而过的布局错乱的问题，虽然只是短短的一瞬间，但每次看到都会让人觉得很不舒服。 (function() { document.addEvent...
移动端APP rem加载时页面放大或压缩解决
csl125的博客
06-02 1856
写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，1，在页面body加载前引入html font-size计算js(function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientati...
移动端rem布局加载瞬间的尺寸有bug 由大变小 或者有小变大，怎么解决?
weixin_42137023的博客
10-21 2452
  我是这样解决的    1  body 或者html 加个visibility：hidden;  或者用opacity：0； &lt;body style="visibility: hidden;"&gt;&lt;/body&gt; 2 使用rem  加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) {     var ...
移动端rem布局，加载瞬间页面缩小
maggie_live的博客
07-07 4169
   在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。    在完成整个页面的时候，我们在手机就看到了加载元素会先变小后恢复正常。1.js加载顺序与加载方法  页面加载顺序通常是“从上往下”加载的，所以把上面这段代码发在head内，但还是出现上述问题。在网上也查找一些资料，换成原生写法，优化加...
pc适配移动端
最新发布
03-25
这种方法可以确保页面整体按照一定比例缩小或放大，从而保持设计的一致性[^4]。 3. **媒体查询** 媒体查询允许开发者根据不同屏幕尺寸定义特定的样式规则。例如，当检测到屏幕小于某个阈值时，应用专门针对该范围...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值