移动端适配总结

做了好多h5页面,终于找到设配手机端

/*以下代码通过缩放方式实现为不同屏幕下适配设计稿尺寸js(不推荐)*/
     function flex(designWidth){
       let phoneScale = parseInt(window.screen.width) / designWidth;
       document.write('<meta name="viewport" content="width=' + designWidth + ',minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ',user-scalable=no">');
     };
  /*以下代码为不同屏幕下字体通过rem适配设计稿的方案
@designWidth 设计稿的全屏宽度
@maxWidth  适配的最大宽度

*/

  (function(designWidth, maxWidth) {
     var doc = document,
      win = window;
    var docEl = doc.documentElement;
    var remStyle = document.createElement("style");
    //获取基准字体大小
    function refreshRem() {
      // var width = parseInt(window.screen.width); // uc有bug
      var width = docEl.getBoundingClientRect().width;
      if (!maxWidth) {
        maxWidth = 750;
      };
      if (width > maxWidth) {
        width = maxWidth;
      }
      var rem = width/designWidth*100;
      //得到的rem基准字体大小,这里乘以100是为了适配有的浏览器不识别小数,会导致设置字体无效。
      //设置根元素html的字体大小为基准字体大小,在css中每rem就是这个值的大小。
      remStyle.innerHTML = 'html{font-size:' + rem + 'px;} ';
    }
    refreshRem();
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(remStyle);
    } else {
      var wrap = doc.createElement("div");
      wrap.appendChild(remStyle);
      doc.write(wrap.innerHTML);
      wrap = null;
    }
   /* 以下为在不同的时机重新计算rem*/
    win.addEventListener("resize", function() {
      // clearTimeout(tid); //防止执行两次
      // tid = setTimeout(refreshRem, 50);
       refreshRem()
    }, false);

    win.addEventListener("pageshow", function(e) {
      if (e.persisted) { // 浏览器后退的时候重新计算
        refreshRem()
        // clearTimeout(tid);
        // tid = setTimeout(refreshRem,50);
      }
    }, false);
  })(750, 750);
  
  ```
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sunny

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值