解決手淘lib-flexible.js在移動端首次加載頁面頁面先放大后正常問題


例如這樣

然后這樣

 

出現這樣的原因一般是   靜態的,即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,這樣修改的會不會對其他方面就影響我還不太清楚,請懂得同學,告訴一下,謝謝


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM