關於手機適配的方案（transform）

標籤：blog   stat   span   get   state   完整   status   type   fonts   

手機按照750px 的設計稿樣式排版。頁面在750px的螢幕上顯示正常

1         var doc = document2         var docEle = doc.documentElement3         var width4         function setRootFontSize(){5             width = docEle.getBoundingClientRect().width6             doc.querySelector(‘#main‘).style = `transform: scale(${width / 750})`7         }8         setRootFontSize()

在其他尺寸的螢幕上，按照比例進行縮放。

 

 

 

 

遇到的問題： 由於在樣式載入後進行了縮放，所以body的高度沒有改變，仍然是縮放之前的高度，所以在頁面載入之後需要設定重新設定body的高度，方法如下：

1         function setHeight() {2             console.log(doc.querySelector(‘#main‘).clientHeight)3             doc.body.style.height = (doc.querySelector(‘#main‘).clientHeight * width / 750) + ‘px‘4         }5         if (doc.readyState === "complete") {6             setHeight()7         } else {8             window.onload = setHeight9         }

document.readystatus 在載入中是loading狀態，載入完成之後轉為complate狀態。需要在此時重新設定body的高度、

 

 

 

完整代碼：

<script type="text/javascript">    void function (){        var doc = document        var docEle = doc.documentElement        var width        function setRootFontSize(){            width = docEle.getBoundingClientRect().width            doc.querySelector(‘#main‘).style = `transform: scale(${width / 750})`        }        setRootFontSize()        function setHeight() {            console.log(doc.querySelector(‘#main‘).clientHeight)            doc.body.style.height = (doc.querySelector(‘#main‘).clientHeight * width / 750) + ‘px‘        }        if (doc.readyState === "complete") {            setHeight()        } else {            window.onload = setHeight        }    }()</script>

 

關於手機適配的方案（transform）