vue项目处理dpr和多屏幕适配问题

<!DOCTYPE html>
<html style="font-size:37.5px">
<head>
  <meta charset="utf-8">
  <meta name="format-detection" content="telephone=no" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style">
  <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->
  <title>快问中医</title>

  <style>
    html { /*消除click 300ms延迟*/
      touch-action: manipulation;
    }
    html, body {
      height: 100%;
      width: 100%;
      /*max-width: 580px;*/
      margin: 0 auto;
      overflow-x: hidden;
      overflow-y: hidden;
      background-color: #F0F0F0;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
    }

    * {
      box-sizing: border-box;
    }
  </style>
  <!-- 淘宝flexible方案 -->
  <script>
    (function (win, lib) {
      var doc = win.document
      var docEl = doc.documentElement
      var metaEl = doc.querySelector('meta[name="viewport"]')
      var flexibleEl = doc.querySelector('meta[name="flexible"]')
      var dpr = 0
      var scale = 0
      var tid
      var flexible = lib.flexible || (lib.flexible = {})

      if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例')
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
        if (match) {
          scale = parseFloat(match[1])
          dpr = parseInt(1 / scale)
        }
      } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content')
        if (content) {
          var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
          var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
          if (initialDpr) {
            dpr = parseFloat(initialDpr[1])
            scale = parseFloat((1 / dpr).toFixed(2))
          }
          if (maximumDpr) {
            dpr = parseFloat(maximumDpr[1])
            scale = parseFloat((1 / dpr).toFixed(2))
          }
        }
      }

      if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi)
        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;
//          }
        dpr = 1
        scale = 1 / dpr
      }

      docEl.setAttribute('data-dpr', dpr)
      if (!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)
        }
      }

      function refreshRem () {
        var width = docEl.getBoundingClientRect().width
        if (width / dpr > 540) {
          width = 540 * dpr
        }
        var rem = width / 10
        docEl.style.fontSize = rem + 'px'
        flexible.rem = win.rem = rem
      }

      win.addEventListener('resize', function () {
        clearTimeout(tid)
        tid = setTimeout(refreshRem, 300)
      }, false)
      win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
          clearTimeout(tid)
          tid = setTimeout(refreshRem, 300)
        }
      }, false)

      if (doc.readyState === 'complete') {
//          doc.body.style.fontSize = 12 * dpr + 'px';
        doc.body.style.fontSize = 16 + 'px'
      } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
//            doc.body.style.fontSize = 12 * dpr + 'px';
          doc.body.style.fontSize = 16 + 'px'
        }, false)
      }

      refreshRem()

      flexible.dpr = win.dpr = dpr
      flexible.refreshRem = refreshRem
      flexible.rem2px = function (d) {
        var val = parseFloat(d) * this.rem
        if (typeof d === 'string' && d.match(/rem$/)) {
          val += 'px'
        }
        return val
      }
      flexible.px2rem = function (d) {
        var val = parseFloat(d) / this.rem
        if (typeof d === 'string' && d.match(/px$/)) {
          val += 'rem'
        }
        return val
      }

    })(window, window['lib'] || (window['lib'] = {}))
  </script>
  <!-- 环境判断:测试、正式 -->
  <script>
    var host = window.location.host
    ;(function isFormalEnv(host){
      if(host.indexOf('kw13.cn') !== -1){
        window.isFormalEnv = true
        window.isTestEnv = false
      } else if(host.indexOf('kwmzy.com') !== -1) {
        window.isTestEnv = true
        window.isFormalEnv = false
      }
    })(host)
  </script>
  <!-- 腾讯移动统计配置 -->
  <script>
    var mtah5 = {}
    if(window.isFormalEnv){
      mtah5.sid = 500411881
      mtah5.cid = 500432840
    } else { // 本地、测试环境使用
      mtah5.sid = 500412096
      mtah5.cid = 500426037
    }
    var _mtac = {"performanceMonitor":1,"senseQuery":1};
    (function() {
      var mta = document.createElement("script");
      mta.setAttribute("name", "MTAH5");
      mta.setAttribute("sid", mtah5.sid);
      mta.setAttribute("cid", mtah5.cid);
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(mta, s);
    })();
  </script>
  <script>
    window.origin = window.location.origin
  </script>
</head>
<body>
<div id="app"><!-- built files will be auto injected --></div>

</body>
</html>
vue项目处理dpr和多屏幕适配问题

猜你喜欢
