javascript - Ajax加载Json时,移动端页面向左上角缩小一截儿,加载完成后才正常显示,这该如何解决?
问题描述
问题: 用rem布局做移动端页面,利用JQ的Ajax加载Json文件,在刷新加载Json时,页面会向左上角缩一截儿,当Json加载完成时,页面显示正常尺寸。 试问,这种问题该如何解决?
理想中的效果是 : 刷新页面重新加载Json前,静态页面已经加载完成,并且是正常尺寸在移动端上显示。
加载Json时的页面:][1]
所引入的JS文件顺序 :
<script src='https://www.haobala.com/wenda/js/jquery-1.11.2.js'></script> <script src='https://www.haobala.com/wenda/js/idangerous.swiper.js'></script> <script type='text/javascript'> //rem设置 window.onload=window.onresize=function(){ document.documentElement.style.fontSize=innerWidth/20 +’px’; } // Swiper JS var WU=new Swiper('.swiper-container',{ loop:true, //是否支持循环播放 speed:400,//延迟时间 mode:’horizontal’,// 'horizontal' 水平轮播; mode:'vertical' 垂直轮播 autoplay:2000, //自动播放 pagination:’.pagination’, //分页器 }) </script> <script src='https://www.haobala.com/wenda/js/index.js' type='text/javascript' charset='utf-8'></script>
问题解答
回答1:移动端不如试试MUI -> 斜眼笑
回答2:猜测和ajax没关系...试试把rem设置相关的js代码不放到onload里,而是提到页面最开始,或者在css中用媒体查询粗略做个html,body的font-size初始设定值
回答3:好像连等赋值和onresize比较可疑,建议去掉后者,变成:
window.onload = function() { document.documentElement.style.fontSize=innerWidth/20 +’px’; }
试试~