H5移動端字體自適應（也適用於寬高）

原文地址：

https://mp.weixin.qq.com/s/hhmav2sbAgb7w17ipVZiTw

方法一：純css方法, 精確度高，IOS 和 安卓 字體大小同等比例
1.1 以16px為基准，在根元素html下，字體為62.5%
1.2 此時1rem=10px;

/* css代碼 */
html {
  /* 10÷16=62.5% */
  font-size: 62.5%;
}

body {
  font-size: 12px;
  /* 12÷10=1.2 */
  font-size: 1.2rem;
}

方法二：純css方法, 精確度高，IOS 和 安卓 字體大小同等比例
2. 在css里，設置 html 元素的字體 font-size 設置為,50px;
2.1 字體和元素寬度用rem，字體和元素的實際大小等於：rem乘以100除以2

/* css代碼 */
/* 在根元素html下，font-size 設置為,50px; */
html{
  // 此處為重點
  font-size: 50px;
}
body{
  font-size: 12px;
}

/* 示例 設置一個寬為400px 高為150px 字體大小為 24px 的div盒子 */
.div {
  font-size: 0.48rem;
  width:8rem ;
  height: 3rem;
  background-color:red ;
}
/* 以上結果為：
*  width:400px;
* height:150px;
* font-size:24px;
* /

方法三：使用JS，通過識別設備是IOS 還是 安卓，用JS動態計算rem轉換px
3. 此方法rem轉px精確不是高
3.1 以iphone6為例，rem轉px 零誤差；以三星S5為例，rem轉px誤差0002
3.2 ios 上1rem=10px;安卓上，1rem=1.5px到1.4168px之間;因此使用了 ismobile 方法判斷設備平台，使rem轉轉px,盡量在IOS 和 安卓上 單位長度保持統一==
3.3 1rem=10px

// JS JS動態計算rem轉換p
function fontSize() {
        var mobileType = ismobile(0)
        //通過navigator判斷是否是移動設備
        if ((navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          ))) {
          //在移動端
          (function(doc, win) {
            //  html
            var docEl = doc.documentElement,
              resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
              recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // console.log("ty",mobileType);
                if (mobileType == "Android") {
                  console.log("我是安卓----------");
                  clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                  docEl.style.fontSize = 10.4168 * (clientWidth / 375) + 'px'; //這個10可以根據自己使用的數據來調整
                }
                if (mobileType == "iPhone") {
                  console.log("我是蘋果----------");
                  clientWidth = (clientWidth > 768) ? 768 : clientWidth;
                  docEl.style.fontSize = 10 * (clientWidth / 375) + 'px'; //這個10可以根據自己使用的數據來調整
                }
              };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            recalc();
          })(document, window);
          //移動端  文字適配
        } else { //如果是pc端我們可以像微信公眾號那樣，設置最大寬度為740px
          document.documentElement.style.margin = "0 auto"
          //PC端
        }
      }
      
// -識別IOS還是安卓
      // param test: 0:iPhone    1:Android
      function ismobile(test) {
        var u = navigator.userAgent,
          app = navigator.appVersion
        if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (
            /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/
            .test(navigator.userAgent))) {
          if (window.location.href.indexOf("?mobile") < 0) {
            try {
              if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
                return "iPhone";
              } else {
                return "Android";
              }
            } catch (e) {
              //            alert(e);
            }
          }
        } else if (app.indexOf('iPad') > -1 || app.indexOf('iPhone') > -1) {
          return "iPhone";
        } else {
          return "Android";

        }
      };