• 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%;
           100%;
          /*max- 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>
    

      

  • 相关阅读:
    JavaBean 与 EJB 的区别
    MFC选项卡的实现
    MFC的图片按钮
    windows 下使用 MinGW + msys 编译 ffmpeg
    在windows使用vs2008编译live555
    C89 和 C99 标准比较
    11.求二元查找树的镜像[MirrorOfBST]
    10.排序数组中和为给定值的两个数字[Find2NumbersWithGivenSum]
    9.链表中倒数第k个结点[FindReverseKthLinkedListNode]
    8.另类方法求1+2+...+n[AnotherMethodOfCalculateSumN]
  • 原文地址:https://www.cnblogs.com/qqfontofweb/p/9107055.html
Copyright © 2020-2023  润新知