h5页面适配
h5页面适配
真座山雕 发表于1年前
h5页面适配
  • 发表于 1年前
  • 阅读 38
  • 收藏 2
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

html跟字体大小设置为100px, 其他都以html为根基, 使用rem相对单位。不同屏幕, 使用一下函数动态设置html的跟字体大小

// 页面适配

(function() {
   var scale,deviceWidth;
   window.screen.width > 414 ? deviceWidth=(window.screen.width/window.devicePixelRatio) : deviceWidth=window.screen.width;
   window.devicePixelRatio >= 1.5 ? scale=deviceWidth/320* 100 : scale=100 ;
   document.getElementsByTagName("html")[0].style.fontSize = scale+"px";
   // alert(scale +'\n'+document.getElementsByTagName("html")[0].style.fontSize)
})();

或者  

(function (doc, win) {
   // 分辨率Resolution适配
   var docEl = doc.documentElement,
         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
         recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
         };

   // Abort if browser does not support addEventListener
   if (!doc.addEventListener) return;
   win.addEventListener(resizeEvt, recalc, false);
   doc.addEventListener('DOMContentLoaded', recalc, false);

   // 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
   (function(){
      return;
      var dpr = scale =1;
      var isIPhone = win.navigator.appVersion.match(/iphone/gi);
      var devicePixelRatio = win.devicePixelRatio;
      if (isIPhone) {
         // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
         if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
            dpr = 3;
         } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
         } else {
            dpr = 1;
         }
      } else {
         // 其他设备下,仍旧使用1倍的方案
         dpr = 1;
      }
      scale = 1 / dpr;

      //
      var metaEl = "";
      metaEl = doc.createElement('meta');
      metaEl.setAttribute('name', 'viewport');
      metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      if (docEl.firstElementChild) {
         docEl.firstElementChild.appendChild(metaEl);
      } else {
         var wrap = doc.createElement('div');
         wrap.appendChild(metaEl);
         doc.write(wrap.innerHTML);
      }
   })();

})(document, window);
共有 人打赏支持
粉丝 10
博文 47
码字总数 19546
×
真座山雕
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: