<!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和多屏幕适配问题的更多相关文章

  1. vue移动端h5页面根据屏幕适配的四种方案

    最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...

  2. android 屏幕适配1 ——dimens.xml的适配

    1.如果是才开始做项目,已经有设计图:720*1280 1).默认values文件夹:1dp=1px values/dimens_x.xml: name: x1~x720   value:1px~72 ...

  3. 论坛源码推荐（11.6）：iPhone6/6 plus屏幕适配Demo，Java代码转Objective-C

    http://www.cocoachina.com/ios/20141106/10153.html iPhone6/6 plus 屏幕适配Demo(代码底层处理)(论坛会员satian)htt 该项目 ...

  4. 转：如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  6. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  8. Vue项目中使用vw实现移动端适配

    我们在vue移动端项目中的适配一般都采用rem,但是rem也不是能兼容所有的终端. 随着viewport单位越来越受到众多浏览器的支持,下面将简单介绍怎么实现vw的兼容问题,用vw代替rem 当我们采 ...

  9. Vue项目屏幕自适应方案

    安装lib-flexible cnpm i lib-flexible -D Vue项目引入 lib-flexible. main.js: import 'lib-flexible/flexible' ...

随机推荐

  1. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  2. Python时间处理，datetime中的strftime/strptime+pandas.DataFrame.pivot_table(像groupby之类 的操作）

    python中datetime模块非常好用,提供了日期格式和字符串格式相互转化的函数strftime/strptime 1.由日期格式转化为字符串格式的函数为: datetime.datetime.s ...

  3. 从此 Typora 代码块有了颜色

    起因 平时喜欢用typora记笔记,但是typora默认代码块没有指定语言,没有高亮看着很不舒服,所以用Autohotkey花了半天写了个脚本,按自己的快捷键就可以自动生成代码块并添加语言,这样就方便 ...

  4. Linux移植到自己的开发板（一）环境搭建

    环境搭建 vmware:VMware Workstation 15 Pro Linux系统:Ubuntu16.04 x64 1. 在Windows系统安装VMware15软件: 2. 网上下载并解压u ...

  5. python 多ip端口扫描器

    from socket import * import threading #导入线程相关模块 import re # qianxiao996精心制作 #博客地址:https://blog.csdn. ...

  6. uoj310. 【UNR #2】黎明前的巧克力

    题目描述: uoj 题解: WTF. 看题解看了一个小时才看明白. 首先有状态$f[i][j]$表示前$i$个东西两人取,最后两人异或和为$j$的有多少方案. 转移为$f[i][j]=f[i-1][j ...

  7. bzoj4596/luoguP4336 [SHOI2016]黑暗前的幻想乡(矩阵树定理，容斥)

    bzoj4596/luoguP4336 [SHOI2016]黑暗前的幻想乡(矩阵树定理,容斥) bzoj Luogu 题解时间 看一看数据范围,求生成树个数毫无疑问直接上矩阵树定理. 但是要求每条边都 ...

  8. node的内置常量 __dirname和 __filename

    node的内置常量 __ dirname和 __ filename __dirname当前文件(你用node运行的文件)所在的文件夹地址 // dirname.js console.log(__dir ...

  9. 一条SQL语句执行得很慢的原因有哪些

    说实话,这个问题可以涉及到 MySQL 的很多核心知识,可以扯出一大堆,就像要考你计算机网络的知识时,问你"输入URL回车之后,究竟发生了什么"一样,看看你能说出多少了. 之前腾讯 ...

  10. char型变量中能不能存储一个中文字符?为什么?

    char型变量是用来存储Unicode编码的字符的,Unicode编码字符集中包含了汉字,因此char型变量中可以存储汉字.不过,如果某个特殊的汉字没有被包含在Unicode编码字符集中,那么,这个c ...