例如這樣
然后這樣
出現這樣的原因一般是 靜態的,即html里有一些靜態的(即非js動態添加的)
如果在頁面加載完成后,頁面是用js動態添加的,這個問題就不太明顯,
doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false);
這段代碼是起主要作用的,但是這段代碼是在頁面初始化完畢才執行的(即把把其他引用的js文件下載好,並且里面的函數都初始完成),
這樣,在頁面加載的一瞬間,我們會看到頁面先先放大的,不解釋了,太晚了,直接說解決方案把。
refreshRem(); //doc.body.style.fontSize = 12 * dpr + 'px'; flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem;
1.在 refreshRem();后面加上doc.body.style.fontSize = 12 * dpr + 'px';這段代碼,
2.
<body> <script type="text/javascript" src="js/lib/flexible_css.js" ></script> <script type="text/javascript" src="js/lib/flexible.js" ></script>
把這兩個js放在body的頭部(),一定要放在這里,
不然 doc.body.style.fontSize = 12 * dpr + 'px'; 我們加的這段代碼會報錯,原因是可能是頁面還沒有body元素
最后ps一句:這個方案的原理就是在body剛加載完就計算fontsize,這樣修改的會不會對其他方面就影響我還不太清楚,請懂得同學,告訴一下,謝謝