移动端APP rem加载时页面放大或压缩解决

最新推荐文章于 2024-07-31 02:32:11 发布

随便起的名字也被占用

最新推荐文章于 2024-07-31 02:32:11 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js html5+css3 mui webapp开发 vue 文章标签： rem rem 页面加载 rem压面加载变形 rem页面加载压缩‘放大

本文链接：https://blog.youkuaiyun.com/csl125/article/details/80548056

js 同时被 3 个专栏收录

40 篇文章

订阅专栏

vue

36 篇文章

订阅专栏

html5+css3

21 篇文章

订阅专栏

本文介绍了在使用rem布局的APP页面中遇到的加载时页面短暂变形的问题，并提供了三种解决方案：1. 使用jQuery方法调整字体大小；2. 使用纯JS方法进行适配；3. 结合body隐藏显示的方法避免加载过程中的视觉不适。

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

写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑，

1，在页面body加载前引入html font-size计算js

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if(!clientWidth) return;
			if(clientWidth >= 640) {
				docEl.style.fontSize = '100px';
			} else {
				docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
			}
		};

	if(!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

我直接粗暴引到meta标签下但是这种方法是jq方法虽然有所改善但还是可见，

然后使用js原生方法

function resize(){
		var docEl = document.documentElement;
		var clientWidth = window.innerWidth;
		if(clientWidth <= 320){
			docEl.style.fontSize = '50px';
		}else if(clientWidth >= 640){
			docEl.style.fontSize = '100px';
		}else{
			docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
		}
	}
resize();

要把js代码放到body前；

还有一种方法就是先给body 设置visibility：hidden；

<body id="body" style="visibility: hidden;">
</body>

然后需要在body下将body的样式设置为visibility：visible；

<script>
			
	document.getElementById('body').style.visibility = "visible";
</script>

这样页面加载完body后先将body隐藏，等待rem js加载完，然后将body显示出来，简单粗暴；

为什么不用display呢？个人认为如果页面display：none；后页面的DOM元素重新渲染了，对jq不友好，所以不建议使用，个人见解。