在做H5页面时，如果主页的元素内容比较多，可能就会导致页面第一次加载时，会先放大然后在恢复正常，影响用户体验，从网上查找了一些解决办法，觉得比较近好的的有2种方式，我采用是第一种方案，如下：
方案一：
将此脚本放到body标签前，就可以解决此问题，但是有个瑕疵，还是有点闪动，效果行。
<script type="text/javascript">
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();
</script>
方案二：
先给body标签设置visibility：hidden，然后在页面底部再将此属性设置为visibility：visible；
<body style="visibility: hidden;">
</body>
<script type="text/javascript" >
document.getElementById('body').style.visibility = "visible";
</script>
原文地址：https://blog.csdn.net/lilinoscar/article/details/82382242
网友评论