html移动端 -- meta-模板 + rem

第一种方式： ps 不用除以2
<header>
 <meta charset="utf-8">

  <meta name="viewport" content="target-densitydpi=device-dpi, width=720, user-scalable=no">
  <meta name="viewport-fit" content="cover">
  <!-- IOS 中 Safari 允许全屏浏览 -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- uc强制竖屏 -->
  <meta name="screen-orientation" content="portrait">
  <!-- QQ强制竖屏 -->
  <meta name="x5-orientation" content="portrait">
  <!-- format-detection 禁用自动识别页面中的电话号码。 -->
  <meta name="format-detection" content="telephone=no" />
</header>




第二种方式：用rem   ps 除以2

// rem

(function(doc, win) {

      var docEle = doc.documentElement,

        evt = "onorientationchange" in window ? "orientationchange" : "resize",

        fn = function() {

        var width = docEle.clientWidth;

        width && (docEle.style.fontSize = 100 * (width / 720) + "px");

        }

      win.addEventListener(evt, fn , false);

      doc.addEventListener("DOMContentLoaded", fn, false)

    }(document, window))