index.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  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. <link
  9. rel="stylesheet"
  10. href="https://minedata.cn/minemapapi/v2.1.0/minemap.css"
  11. />
  12. <script src="https://minedata.cn/minemapapi/v2.1.0/minemap.js"></script>
  13. <script>
  14. minemap.domainUrl = "https://minedata.cn";
  15. minemap.dataDomainUrl = "https://minedata.cn";
  16. minemap.serverDomainUrl = "https://minedata.cn";
  17. minemap.spriteUrl = "https://minedata.cn/minemapapi/v2.1.0/sprite/sprite";
  18. minemap.serviceUrl = "https://minedata.cn/service/";
  19. /**
  20. * key、solution设置
  21. */
  22. minemap.key = "77ef70465c2d4888b3a5132523494b94";
  23. minemap.solution = 16857;
  24. </script>
  25. <script>
  26. (function (win, lib) {
  27. var doc = win.document;
  28. var docEl = doc.documentElement;
  29. var metaEl = doc.querySelector('meta[name="viewport"]');
  30. var flexibleEl = doc.querySelector('meta[name="flexible"]');
  31. var dpr = 0;
  32. var scale = 0;
  33. var tid;
  34. var flexible = lib.flexible || (lib.flexible = {});
  35. if (metaEl) {
  36. console.warn("将根据已有的meta标签来设置缩放比例");
  37. var match = metaEl
  38. .getAttribute("content")
  39. .match(/initial\-scale=([\d\.]+)/);
  40. if (match) {
  41. scale = parseFloat(match[1]);
  42. dpr = parseInt(1 / scale);
  43. }
  44. } else if (flexibleEl) {
  45. var content = flexibleEl.getAttribute("content");
  46. if (content) {
  47. var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  48. var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  49. if (initialDpr) {
  50. dpr = parseFloat(initialDpr[1]);
  51. scale = parseFloat((1 / dpr).toFixed(2));
  52. }
  53. if (maximumDpr) {
  54. dpr = parseFloat(maximumDpr[1]);
  55. scale = parseFloat((1 / dpr).toFixed(2));
  56. }
  57. }
  58. }
  59. if (!dpr && !scale) {
  60. var isAndroid = win.navigator.appVersion.match(/android/gi);
  61. var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  62. var devicePixelRatio = win.devicePixelRatio;
  63. if (isIPhone) {
  64. // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  65. if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  66. dpr = 3;
  67. } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
  68. dpr = 2;
  69. } else {
  70. dpr = 1;
  71. }
  72. } else {
  73. // 其他设备下,仍旧使用1倍的方案
  74. dpr = 1;
  75. }
  76. scale = 1 / dpr;
  77. }
  78. docEl.setAttribute("data-dpr", dpr);
  79. if (!metaEl) {
  80. metaEl = doc.createElement("meta");
  81. metaEl.setAttribute("name", "viewport");
  82. metaEl.setAttribute(
  83. "content",
  84. "initial-scale=" +
  85. scale +
  86. ", maximum-scale=" +
  87. scale +
  88. ", minimum-scale=" +
  89. scale +
  90. ", user-scalable=no"
  91. );
  92. if (docEl.firstElementChild) {
  93. docEl.firstElementChild.appendChild(metaEl);
  94. } else {
  95. var wrap = doc.createElement("div");
  96. wrap.appendChild(metaEl);
  97. doc.write(wrap.innerHTML);
  98. }
  99. }
  100. function refreshRem() {
  101. var width = docEl.getBoundingClientRect().width;
  102. if (width / dpr > 540) {
  103. width = 540 * dpr;
  104. }
  105. var rem = width / 10;
  106. docEl.style.fontSize = rem + "px";
  107. flexible.rem = win.rem = rem;
  108. }
  109. win.addEventListener(
  110. "resize",
  111. function () {
  112. clearTimeout(tid);
  113. tid = setTimeout(refreshRem, 300);
  114. },
  115. false
  116. );
  117. win.addEventListener(
  118. "pageshow",
  119. function (e) {
  120. if (e.persisted) {
  121. clearTimeout(tid);
  122. tid = setTimeout(refreshRem, 300);
  123. }
  124. },
  125. false
  126. );
  127. if (doc.readyState === "complete") {
  128. doc.body.style.fontSize = 12 * dpr + "px";
  129. } else {
  130. doc.addEventListener(
  131. "DOMContentLoaded",
  132. function (e) {
  133. doc.body.style.fontSize = 12 * dpr + "px";
  134. },
  135. false
  136. );
  137. }
  138. refreshRem();
  139. flexible.dpr = win.dpr = dpr;
  140. flexible.refreshRem = refreshRem;
  141. flexible.rem2px = function (d) {
  142. var val = parseFloat(d) * this.rem;
  143. if (typeof d === "string" && d.match(/rem$/)) {
  144. val += "px";
  145. }
  146. return val;
  147. };
  148. flexible.px2rem = function (d) {
  149. var val = parseFloat(d) / this.rem;
  150. if (typeof d === "string" && d.match(/px$/)) {
  151. val += "rem";
  152. }
  153. return val;
  154. };
  155. })(window, window["lib"] || (window["lib"] = {}));
  156. </script>
  157. </head>
  158. <body>
  159. <div id="app"></div>
  160. <script type="module" src="/src/main.ts"></script>
  161. </body>
  162. </html>