标签:get hub win 方案 settime head rect http out
移动端页面满屏自适应方案(采用rem作为单位,设计稿为750 * 1334)
代码引入:
<head> <script>function refreshRem(){var e=docEl.getBoundingClientRect().width,t=docEl.getBoundingClientRect().height;if(e/t>750/1334)var i=t/26.68;else var i=e/15;docEl.style.fontSize=i+"px"}var win=window,doc=win.document,docEl=doc.documentElement,tid;win.addEventListener("resize",function(){clearTimeout(tid),tid=setTimeout(refreshRem,300)},!1),win.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(tid),tid=setTimeout(refreshRem,300))},!1),refreshRem();</script> </head>
源码
var win = window;
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
var height = docEl.getBoundingClientRect().height;
if ((width / height) > (750 / 1334)) {
var rem = height / (1334 / 50);
} else {
var rem = width / (750 / 50);
}
docEl.style.fontSize = rem + ‘px‘;
}
win.addEventListener(‘resize‘, function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener(‘pageshow‘, function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
标签:get hub win 方案 settime head rect http out
原文地址:http://www.cnblogs.com/duanyue/p/7346024.html