h5页面适配

html跟字体大小设置为100px， 其他都以html为根基， 使用rem相对单位。不同屏幕， 使用一下函数动态设置html的跟字体大小 // 页面适配 (function() { var sca

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);