移動端APP rem載入時頁面放大或壓縮解決

csl125發表於2018-06-02
APPREM

寫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不友好，所以不建議使用，個人見解。




相關文章