码迷,mamicode.com
首页 > 移动开发 > 详细

移动端页面适配问题

时间:2017-08-11 16:05:06      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:get   hub   win   方案   settime   head   rect   http   out   

移动端页面满屏自适应方案(采用rem作为单位,设计稿为750 * 1334)

  • 修改自阿里的lib-flexible,与lib-flexible相比,删除了dpr,保留rem
  • 满屏自适应,要求设计稿为750 * 1334
  • 单位换算为1rem = 50px      

   代码引入:

<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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!