use rem to adjust mobile

ly525
1 parent a24d7435
Showing 3 changed files with 36 additions and 5 deletions
back-end/h5-api/views/engine.ejs
front-end/h5/src/components/core/editor/modals/preview.vue
front-end/h5/src/utils/element.js
@@ -9,11 +9,34 @@
   <meta content="telephone=no" name="format-detection">
   <meta content="email=no" name="format-detection">
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
-  <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script>
+  <!-- <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script> -->
   <!-- <link rel="stylesheet" href="/be-static/be-static-luban-h5/engine/engine.css"> -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
   <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
+  <script>
+    function setDocFontSize(base) {
+      var width = 375,
+      domEle = document.documentElement;
+      dw = domEle.clientWidth || width,
+      iw = window.innerWidth || width,
+      sw = window.screen.width || iw,
+      saw = window.screen.availWidth || iw,
+      w = Math.min(dw, iw, sw, saw);
+      base = base || 750;
+      if (w > base) {
+          w = base;
+      }
+      if (window.devicePixelRatio) {
+          dpr = window.devicePixelRatio;
+      } else {
+          dpr = navigator.userAgent.match(/iphone/i) ? (w > 818 ? 3 : w > 480 ? 2 : 1) : 1;
+      }
+      dpr = Math.floor(dpr);
+      domEle.style.fontSize = w / base * 100 + "px";
+      domEle.dataset.dpr = dpr;
+    }
+  </script>
   <script>window.__work = <%- JSON.stringify(work) %></script>
   <script src="/engine-assets/engine.js"></script>
   <style>
@@ -27,7 +50,7 @@
   </style>
 </head>
  
-<body>
+<body onload="setDocFontSize(320)">
   <div id="app">
     <button class="swiper-button-next" style="position: fixed;left: 1000px">Next</button>
     <button class="swiper-button-prev" style="position: fixed;left: 1000px">Prev</button>
@@ -17,7 +17,7 @@ export default {
       work: state => state.work
     }),
     releaseUrl () {
-      return `//localhost:1337/works/preview/${this.work.id}`
+      return `http://${window.location.hostname}:1337/works/preview/${this.work.id}`
     }
   },
   data () {
@@ -60,7 +60,10 @@ export default {
       let iframeWin = document.getElementById('iframe-for-preview').contentWindow
       // iframeWin.postMessage('next', window.location.origin);
       iframeWin.postMessage(message, 'http://localhost:1337')
-    }
+    },
+    openNewTab () {
+      window.open(this.releaseUrl);
+    },
   },
   render (h) {
     return (
@@ -122,11 +125,16 @@ export default {
                   <div class="label">手机扫码分享给好友</div>
                   <div class="code">
                     <canvas style="float: left" id="qrcode-container"></canvas>
+                    <div>
+                      <a-button type="dashed" onClick={() => this.openNewTab()}>打开预览 URL </a-button>
+                    </div>
+                    {/**
                     <a-radio-group class="radios" value={this.qrcodeSize} onChange={e => { this.qrcodeSize = e.target.value }}>
                       <a-radio label={500} value={500}>500x500</a-radio>
                       <a-radio label={1000} value={1000}>1000x1000</a-radio>
                       <a-radio label={2000} value={2000}>2000x2000</a-radio>
                     </a-radio-group>
+                    */}
                   </div>
                 </div>
               </div>
@@ -31,7 +31,7 @@ function px2Rem (px) {
  * @param {Number} px 元素的某个属性的像素值，比如 height
  * @param {Boolean} isToRem 是否将 px 转换为 rem
  */
-export function parsePx (px, isRem = false) {
+export function parsePx (px, isRem = true) {
   if (isRem) return px2Rem(px)
   return `${px}px`
 }