rem布局－手機webApp自适應

該方案使用相當簡單，把下面這段已壓縮過的 原生JS（僅1kb，源碼已在文章底部更新，2017/5/3） 放到 HTML 的 head 标簽中即可（注:不要手動設定viewport，該方案自動幫你設定）

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>
           

代碼原理

這是阿裡團隊的高清方案布局代碼，所謂高清方案就是根據裝置螢幕的DPR（裝置像素比，又稱DPPX，比如dpr=2時，表示1個CSS像素由4個實體像素點組成）** 動态設定 html 的font-size, 同時根據裝置DPR調整頁面的縮放值，進而達到高清效果**。

有何優勢

• 引用簡單，布局簡便
• 根據裝置螢幕的DPR,自動設定最合适的高清縮放。
• 保證了不同裝置下視覺體驗的一緻性。（老方案是，螢幕越大元素越大；此方案是，螢幕越大，看的越多）
• 有效解決移動端真實1px問題（這裡的1px 是裝置螢幕上的實體像素）

高清方案源碼

'use strict';

/**
 * @param {Boolean} [normal = false] - 預設開啟頁面壓縮以使頁面高清;  
 * @param {Number} [baseFontSize = 100] - 基礎fontSize, 預設100px;
 * @param {Number} [fontscale = 1] - 有的業務希望能放大一定比例的字型;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC核心, 就不執行高清, dpr設為1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
           

作者：_minooo_

連結：https://www.jianshu.com/p/985d26b40199

來源：簡書

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。