标签：blog stat span get state 完整 status type fonts
手机按照750px 的设计稿样式排版。页面在750px的屏幕上显示正常
1 var doc = document 2 var docEle = doc.documentElement 3 var width 4 function setRootFontSize(){ 5 width = docEle.getBoundingClientRect().width 6 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 = setHeight 9 }
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>
标签：blog stat span get state 完整 status type fonts
原文地址：http://www.cnblogs.com/summer0319/p/7725298.html
