index.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>交通运输应急指挥系统</title>
  8. <script src="./webClient/defaultConfig.js"></script>
  9. <script src="./webClient/initWebSocket.js"></script>
  10. <script src="./webClient/webClient_initWnd.js"></script>
  11. <script src="./lib/jquery.js"></script>
  12. <script src="./lib/md5.js"></script>
  13. <script src="./lib/jsencrypt.min.js"></script>
  14. <!-- <script src="./url.js"></script> -->
  15. <script src="./login.js"></script>
  16. <script src="./meeting.js"></script>
  17. <script src="./main.js"></script>
  18. <script>
  19. (function (win, lib) {
  20. var doc = win.document;
  21. var docEl = doc.documentElement;
  22. var metaEl = doc.querySelector('meta[name="viewport"]');
  23. var flexibleEl = doc.querySelector('meta[name="flexible"]');
  24. var dpr = 0;
  25. var scale = 0;
  26. var tid;
  27. var flexible = lib.flexible || (lib.flexible = {});
  28. if (metaEl) {
  29. console.warn("将根据已有的meta标签来设置缩放比例");
  30. var match = metaEl
  31. .getAttribute("content")
  32. .match(/initial\-scale=([\d\.]+)/);
  33. if (match) {
  34. scale = parseFloat(match[1]);
  35. dpr = parseInt(1 / scale);
  36. }
  37. } else if (flexibleEl) {
  38. var content = flexibleEl.getAttribute("content");
  39. if (content) {
  40. var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  41. var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  42. if (initialDpr) {
  43. dpr = parseFloat(initialDpr[1]);
  44. scale = parseFloat((1 / dpr).toFixed(2));
  45. }
  46. if (maximumDpr) {
  47. dpr = parseFloat(maximumDpr[1]);
  48. scale = parseFloat((1 / dpr).toFixed(2));
  49. }
  50. }
  51. }
  52. if (!dpr && !scale) {
  53. var isAndroid = win.navigator.appVersion.match(/android/gi);
  54. var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  55. var devicePixelRatio = win.devicePixelRatio;
  56. if (isIPhone) {
  57. // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  58. if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  59. dpr = 3;
  60. } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
  61. dpr = 2;
  62. } else {
  63. dpr = 1;
  64. }
  65. } else {
  66. // 其他设备下,仍旧使用1倍的方案
  67. dpr = 1;
  68. }
  69. scale = 1 / dpr;
  70. }
  71. docEl.setAttribute("data-dpr", dpr);
  72. if (!metaEl) {
  73. metaEl = doc.createElement("meta");
  74. metaEl.setAttribute("name", "viewport");
  75. metaEl.setAttribute(
  76. "content",
  77. "initial-scale=" +
  78. scale +
  79. ", maximum-scale=" +
  80. scale +
  81. ", minimum-scale=" +
  82. scale +
  83. ", user-scalable=no"
  84. );
  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(
  103. "resize",
  104. function () {
  105. clearTimeout(tid);
  106. tid = setTimeout(refreshRem, 300);
  107. },
  108. false
  109. );
  110. win.addEventListener(
  111. "pageshow",
  112. function (e) {
  113. if (e.persisted) {
  114. clearTimeout(tid);
  115. tid = setTimeout(refreshRem, 300);
  116. }
  117. },
  118. false
  119. );
  120. if (doc.readyState === "complete") {
  121. doc.body.style.fontSize = 12 * dpr + "px";
  122. } else {
  123. doc.addEventListener(
  124. "DOMContentLoaded",
  125. function (e) {
  126. doc.body.style.fontSize = 12 * dpr + "px";
  127. },
  128. false
  129. );
  130. }
  131. refreshRem();
  132. flexible.dpr = win.dpr = dpr;
  133. flexible.refreshRem = refreshRem;
  134. flexible.rem2px = function (d) {
  135. var val = parseFloat(d) * this.rem;
  136. if (typeof d === "string" && d.match(/rem$/)) {
  137. val += "px";
  138. }
  139. return val;
  140. };
  141. flexible.px2rem = function (d) {
  142. var val = parseFloat(d) / this.rem;
  143. if (typeof d === "string" && d.match(/px$/)) {
  144. val += "rem";
  145. }
  146. return val;
  147. };
  148. })(window, window["lib"] || (window["lib"] = {}));
  149. </script>
  150. </head>
  151. <body style="background-color: red">
  152. <div id="app"></div>
  153. </body>
  154. </html>