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

曾经终败给现在 2022-05-23 05:05 150阅读 0赞

写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不友好，所以不建议使用，个人见解。

发表评论取消回复

表情：

评论列表（有 0 条评论，150人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端rem布局

rem布局（等比缩放布局） rem布局好处：不同设备下看起来比较协调。坏处：显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1

分手后的思念是犯贱/ 2023年07月09日 13:29/ 0 赞/ 179 阅读

相关 VUE_vue移动端禁止页面放大缩小

安卓：在 index.html 中添加 meta 标签。 <meta charset="utf-8"> <meta name="viewport" c

ゞ浴缸里的玫瑰/ 2023年01月15日 03:56/ 0 赞/ 198 阅读

相关移动端页面适配(px2rem)

1、安装引入lib-flexible . 　　安装lib-flexible：　　npm i lib-flexible --save

快来打我*/ 2022年12月16日 13:12/ 0 赞/ 221 阅读

相关移动端布局 rem

移动端布局 rem rem定义 1、rem相对于 html元素字体大小来说的 2、rem的有点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以

曾经终败给现在/ 2022年11月19日 09:47/ 0 赞/ 288 阅读

相关以rem为单位移动端页面开发

头部需要添加meta标签 <meta name="viewport" content="width=device-width, initial-scale= 1, m

小鱼儿/ 2022年09月21日 14:29/ 0 赞/ 205 阅读

相关移动端页面使用rem来做适配

rem来做适配以前我们往往这样做页面：viewport width 设置为 device-width，然后选我们需要兼容设备的最小宽度（一般是320px）。根据这最小宽

爱被打了一巴掌/ 2022年05月27日 10:50/ 0 赞/ 263 阅读

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

写APP页面的时候遇见坑，布局使用rem，但是再页面渲染加载时出现变形，虽然时间非常短，但是肉眼可见，于是爬坑， 1，在页面body加载前引入html font-size计算

曾经终败给现在/ 2022年05月23日 05:05/ 0 赞/ 151 阅读

相关 app移动端 rem和px的换算

rem.js文件 / Created by zhaolele on 2018/7/25. / (function(doc, win) {

约定不等于承诺〃/ 2022年03月12日 05:11/ 0 赞/ 292 阅读

相关 H5移动端放大缩小解决

> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal

比眉伴天荒/ 2022年03月01日 08:41/ 0 赞/ 511 阅读

相关移动端rem加载时页面字体先放大再缩小

先给body 设置visibility：hidden； <body id="body" style="visibility: hidden;"> </body

比眉伴天荒/ 2021年10月19日 02:24/ 0 赞/ 352 阅读