当前位置:   article > 正文

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

window.isformalenv

转自 大桥的前端日志    https://www.cnblogs.com/qqfontofweb/p/9107055.html

  1. <!DOCTYPE html>
  2. <html style="font-size:37.5px">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="format-detection" content="telephone=no" >
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style">
  8. <!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">-->
  9. <title>快问中医</title>
  10. <style>
  11. html { /*消除click 300ms延迟*/
  12. touch-action: manipulation;
  13. }
  14. html, body {
  15. height: 100%;
  16. width: 100%;
  17. margin: 0 auto;
  18. overflow-x: hidden;
  19. overflow-y: hidden;
  20. background-color: #F0F0F0;
  21. font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;
  22. }
  23. * {
  24. box-sizing: border-box;
  25. }
  26. </style>
  27. <!-- 淘宝flexible方案 -->
  28. <script>
  29. (function (win, lib) {
  30. var doc = win.document
  31. var docEl = doc.documentElement
  32. var metaEl = doc.querySelector('meta[name="viewport"]')
  33. var flexibleEl = doc.querySelector('meta[name="flexible"]')
  34. var dpr = 0
  35. var scale = 0
  36. var tid
  37. var flexible = lib.flexible || (lib.flexible = {})
  38. if (metaEl) {
  39. console.warn('将根据已有的meta标签来设置缩放比例')
  40. var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
  41. if (match) {
  42. scale = parseFloat(match[1])
  43. dpr = parseInt(1 / scale)
  44. }
  45. } else if (flexibleEl) {
  46. var content = flexibleEl.getAttribute('content')
  47. if (content) {
  48. var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
  49. var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
  50. if (initialDpr) {
  51. dpr = parseFloat(initialDpr[1])
  52. scale = parseFloat((1 / dpr).toFixed(2))
  53. }
  54. if (maximumDpr) {
  55. dpr = parseFloat(maximumDpr[1])
  56. scale = parseFloat((1 / dpr).toFixed(2))
  57. }
  58. }
  59. }
  60. if (!dpr && !scale) {
  61. var isAndroid = win.navigator.appVersion.match(/android/gi)
  62. var isIPhone = win.navigator.appVersion.match(/iphone/gi)
  63. var devicePixelRatio = win.devicePixelRatio
  64. // if (isIPhone) {
  65. // // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  66. // if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  67. // dpr = 3;
  68. // } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
  69. // dpr = 2;
  70. // } else {
  71. // dpr = 1;
  72. // }
  73. // } else {
  74. // // 其他设备下,仍旧使用1倍的方案
  75. // dpr = 1;
  76. // }
  77. dpr = 1
  78. scale = 1 / dpr
  79. }
  80. docEl.setAttribute('data-dpr', dpr)
  81. if (!metaEl) {
  82. metaEl = doc.createElement('meta')
  83. metaEl.setAttribute('name', 'viewport')
  84. metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
  85. if (docEl.firstElementChild) {
  86. docEl.firstElementChild.appendChild(metaEl)
  87. } else {
  88. var wrap = doc.createElement('div')
  89. wrap.appendChild(metaEl)
  90. doc.write(wrap.innerHTML)
  91. }
  92. }
  93. function refreshRem () {
  94. var width = docEl.getBoundingClientRect().width
  95. if (width / dpr > 540) {
  96. width = 540 * dpr
  97. }
  98. var rem = width / 10
  99. docEl.style.fontSize = rem + 'px'
  100. flexible.rem = win.rem = rem
  101. }
  102. win.addEventListener('resize', function () {
  103. clearTimeout(tid)
  104. tid = setTimeout(refreshRem, 300)
  105. }, false)
  106. win.addEventListener('pageshow', function (e) {
  107. if (e.persisted) {
  108. clearTimeout(tid)
  109. tid = setTimeout(refreshRem, 300)
  110. }
  111. }, false)
  112. if (doc.readyState === 'complete') {
  113. // doc.body.style.fontSize = 12 * dpr + 'px';
  114. doc.body.style.fontSize = 16 + 'px'
  115. } else {
  116. doc.addEventListener('DOMContentLoaded', function (e) {
  117. // doc.body.style.fontSize = 12 * dpr + 'px';
  118. doc.body.style.fontSize = 16 + 'px'
  119. }, false)
  120. }
  121. refreshRem()
  122. flexible.dpr = win.dpr = dpr
  123. flexible.refreshRem = refreshRem
  124. flexible.rem2px = function (d) {
  125. var val = parseFloat(d) * this.rem
  126. if (typeof d === 'string' && d.match(/rem$/)) {
  127. val += 'px'
  128. }
  129. return val
  130. }
  131. flexible.px2rem = function (d) {
  132. var val = parseFloat(d) / this.rem
  133. if (typeof d === 'string' && d.match(/px$/)) {
  134. val += 'rem'
  135. }
  136. return val
  137. }
  138. })(window, window['lib'] || (window['lib'] = {}))
  139. </script>
  140. <!-- 环境判断:测试、正式 -->
  141. <script>
  142. var host = window.location.host
  143. ;(function isFormalEnv(host){
  144. if(host.indexOf('kw13.cn') !== -1){
  145. window.isFormalEnv = true
  146. window.isTestEnv = false
  147. } else if(host.indexOf('kwmzy.com') !== -1) {
  148. window.isTestEnv = true
  149. window.isFormalEnv = false
  150. }
  151. })(host)
  152. </script>
  153. <!-- 腾讯移动统计配置 -->
  154. <script>
  155. var mtah5 = {}
  156. if(window.isFormalEnv){
  157. mtah5.sid = 500411881
  158. mtah5.cid = 500432840
  159. } else { // 本地、测试环境使用
  160. mtah5.sid = 500412096
  161. mtah5.cid = 500426037
  162. }
  163. var _mtac = {"performanceMonitor":1,"senseQuery":1};
  164. (function() {
  165. var mta = document.createElement("script");
  166. mta.setAttribute("name", "MTAH5");
  167. mta.setAttribute("sid", mtah5.sid);
  168. mta.setAttribute("cid", mtah5.cid);
  169. var s = document.getElementsByTagName("script")[0];
  170. s.parentNode.insertBefore(mta, s);
  171. })();
  172. </script>
  173. <script>
  174. window.origin = window.location.origin
  175. </script>
  176. </head>
  177. <body>
  178. <div id="app"><!-- built files will be auto injected --></div>
  179. </body>
  180. </html>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/270711
推荐阅读
  

闽ICP备14008679号