徐烜 / bsth-ebus-h5_editor · Commits

Commit 91525f0bc5150c983dbb17f6da081427fcc64a02

Authored by ly525
1 parent 2c28138b

refactor(engine): scale viewport to mobile page; 缩放viewport 适配移动端

Inline Side-by-side
Showing 1 changed file with 225 additions and 40 deletions
back-end/h5-api/views/engine.ejs
  View file @91525f0
  1 +<!--
  2 + * @Author: ly525
  3 + * @Date: 2019-12-04 20:24:04
  4 + * @LastEditors: ly525
  5 + * @LastEditTime: 2019-12-14 21:46:01
  6 + * @FilePath: /luban-h5/back-end/h5-api/views/engine.ejs
  7 + * @Github: https://github.com/ly525/luban-h5
  8 + * @Description: 手机端预览模板
  9 + * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
  10 + -->
  11 +
1 12 <html>
2 13  
3 14 <head>
4 15 <meta charset="UTF-8">
5 16 <title>work.html</title>
6   - <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  17 + <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
7 18 <meta content="yes" name="apple-mobile-web-app-capable">
8 19 <meta content="black" name="apple-mobile-web-app-status-bar-style">
9 20 <meta content="telephone=no" name="format-detection">
10 21 <meta content="email=no" name="format-detection">
11 22 <script src="/third-libs/vue.js"></script>
12   - <script type="text/javascript" src="/third-libs/flexible.js"></script>
13 23 <link rel="stylesheet" href="/third-libs/animate.min.css">
14 24 <link rel="stylesheet" href="/third-libs/swiper.min.css">
15 25 <script src="/third-libs/swiper.min.js"></script>
16   - <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
17   - <!-- <script type="text/javascript" src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/flexible.js"></script> -->
18   - <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> -->
19   - <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> -->
20   - <script>
21   - // function setDocFontSize(base) {
22   - // var width = 375,
23   - // domEle = document.documentElement;
24   - // dw = domEle.clientWidth || width,
25   - // iw = window.innerWidth || width,
26   - // sw = window.screen.width || iw,
27   - // saw = window.screen.availWidth || iw,
28   - // w = Math.min(dw, iw, sw, saw);
29   - // base = base || 750;
30   - // if (w > base) {
31   - // w = base;
32   - // }
33   - // if (window.devicePixelRatio) {
34   - // dpr = window.devicePixelRatio;
35   - // } else {
36   - // dpr = navigator.userAgent.match(/iphone/i) ? (w > 818 ? 3 : w > 480 ? 2 : 1) : 1;
37   - // }
38   - // dpr = Math.floor(dpr);
39   - // // domEle.style.fontSize = w / base * 100 + "px";
40   - // // domEle.body.style.fontSize = w / base * 100 + "px";
41   - // domEle.dataset.dpr = dpr;
42   - // }
43   - // setDocFontSize(320)
44   - </script>
45 26 <script>window.__work = <%- JSON.stringify(work) %></script>
46 27 <script src="/engine-assets/engine.umd.js"></script>
47 28 <style>
  29 + /*
  30 + scss 文件，用来生成下面一段 style 中的 css
  31 + css 在线转 css：https://www.sassmeister.com/
  32 + */
  33 + /* * {
  34 + outline: none;
  35 + }
  36 +
  37 + .bg-wrapper {
  38 + width: 100%;
  39 + height: 100%;
  40 + background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  41 + }
  42 +
  43 + .preview-wrapper {
  44 + position: relative;
  45 + display: flex;
  46 + flex-wrap: nowrap;
  47 + width: 320px;
  48 + height: 568px;
  49 +
  50 + position: absolute;
  51 + top: 50%;
  52 + left: 50%;
  53 + transform: translate(-50%, -50%);
  54 +
  55 + .phone-wrapper {
  56 + position: absolute;
  57 + width: 320px;
  58 + height: 568px;
  59 + display: inline-block;
  60 + background: #fff;
  61 + box-sizing: content-box;
  62 + border: 10px solid #f6f6f6;
  63 + }
  64 +
  65 + .float-shortcuts {
  66 + position: absolute;
  67 + top: 100px;
  68 + right: 0;
  69 +
  70 + .page-controller {
  71 + position: absolute;
  72 + left: 0 !important;
  73 + display: block;
  74 + box-sizing: border-box;
  75 + width: 22px;
  76 + height: 60px;
  77 + padding: 4px;
  78 + border-top-right-radius: 5px;
  79 + border-bottom-right-radius: 5px;
  80 +
  81 + cursor: pointer;
  82 + background: #2096f9;
  83 + font-size: 12px;
  84 + border: 1px solid #2096f9;
  85 + color: #fff;
  86 +
  87 + &.next {
  88 + top: 80px;
  89 + }
  90 + }
  91 + }
  92 +
  93 + .work-info {
  94 + color: #4a4a4a;
  95 + font-size: 14px;
  96 + margin-left: 380px;
  97 +
  98 + .qrcode-wrapper {
  99 + .qrcode-label {
  100 + }
  101 +
  102 + .qrcode-img {
  103 + }
  104 + }
  105 + }
  106 + } */
  107 + </style>
  108 + <style>
48 109 * {
49 110 outline: none;
50 111 }
51   - .swiper-container {
  112 +
  113 + .bg-wrapper {
  114 + width: 100%;
  115 + height: 100%;
  116 + background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
  117 + }
  118 + /* .swiper-container {
52 119 width: 100%;
53 120 height: 100vh;
  121 + } */
  122 +
  123 + .preview-wrapper {
  124 + position: relative;
  125 + display: flex;
  126 + flex-wrap: nowrap;
  127 + width: 320px;
  128 + height: 568px;
  129 + /* position: absolute;
  130 + left: 0;
  131 + top: 0;
  132 + right: 0;
  133 + bottom: 0;
  134 + margin: auto; */
  135 + position: absolute;
  136 + top: 50%;
  137 + left: 50%;
  138 + transform: translate(-50%, -50%);
  139 + }
  140 + .preview-wrapper .phone-wrapper {
  141 + position: absolute;
  142 + width: 320px;
  143 + height: 568px;
  144 + display: inline-block;
  145 + background: #fff;
  146 + box-sizing: content-box;
  147 + border: 10px solid #f6f6f6;
  148 + }
  149 + .preview-wrapper .float-shortcuts {
  150 + position: absolute;
  151 + top: 100px;
  152 + right: 0;
  153 + }
  154 + .preview-wrapper .float-shortcuts .page-controller {
  155 + position: absolute;
  156 + left: 0 !important;
  157 + display: block;
  158 + box-sizing: border-box;
  159 + width: 22px;
  160 + height: 60px;
  161 + padding: 4px;
  162 + border-top-right-radius: 5px;
  163 + border-bottom-right-radius: 5px;
  164 + cursor: pointer;
  165 + background: #2096f9;
  166 + font-size: 12px;
  167 + /* border: 1px solid #2096f9; */
  168 + color: #fff;
54 169 }
  170 + .preview-wrapper .float-shortcuts .page-controller.next {
  171 + top: 80px;
  172 + }
  173 + .preview-wrapper .work-info {
  174 + color: #4a4a4a;
  175 + font-size: 14px;
  176 + margin-left: 380px;
  177 + }
  178 +
55 179 </style>
56 180 </head>
57   -<!-- <body onload="setDocFontSize(320)"> -->
58 181 <body>
59   - <div id="app">
60   - <button class="swiper-button-next" style="position: fixed;left: 1000px">Next</button>
61   - <button class="swiper-button-prev" style="position: fixed;left: 1000px">Prev</button>
62   - <engine />
  182 + <div class="bg-wrapper"></div>
  183 + <div class="preview-wrapper">
  184 + <div class="phone-wrapper">
  185 + <div class="float-shortcuts">
  186 + <a class="page-controller swiper-button-prev prev">上一页</a>
  187 + <a class="page-controller swiper-button-next next">下一页</a>
  188 + </div>
  189 + <div id="app">
  190 + <engine />
  191 + </div>
  192 + </div>
  193 + <div class="work-info">
  194 + <div class="qrcode-wrapper">
  195 + <div class="qrcode-label">
  196 + <span>手机扫码分享给好友</span>
  197 + </div>
  198 + <div class="qrcode-img">
  199 + <canvas style="float: left" id="qrcode-canvas"></canvas>
  200 + </div>
  201 + </div>
  202 + </div>
63 203 </div>
64 204 <script>
  205 + !function () {
  206 + function isMobile() {
  207 + var mobileDeviceReg = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobi/i
  208 + return mobileDeviceReg.test(navigator.userAgent) || window.innerWidth < 500
  209 + }
  210 +
  211 + function updateViewport() {
  212 + var scale = 1;
  213 + var w = document.documentElement.clientWidth || 320;
  214 + var h = document.documentElement.clientHeight || 568;
  215 + scale = w/h >= 320/568 ? h/568 : w/320;
  216 + var viewport = "width=320, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
  217 + document.getElementById("viewport").setAttribute("content", viewport)
  218 + }
  219 +
  220 + function doMobileActions () {
  221 + updateViewport();
  222 + var app = document.getElementById('app');
  223 + document.body.innerHTML = '';
  224 + document.body.appendChild(app);
  225 + }
  226 +
  227 + var loadJS = function (url, callback, location) {
  228 + location = location || document.head
  229 +
  230 + var scriptTag = document.createElement('script');
  231 + scriptTag.onload = callback;
  232 + // scriptTag.onreadystatechange = callback;
  233 + scriptTag.src = url;
  234 + location.appendChild(scriptTag);
  235 + };
  236 +
  237 + function drawQRcode () {
  238 + var canvas = document.getElementById('qrcode-canvas')
  239 + QRCode.toCanvas(canvas, window.location.href, {
  240 + scale: 4
  241 + })
  242 + }
  243 +
  244 + function doPCActions() {
  245 + loadJS('https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js', drawQRcode);
  246 + }
  247 +
  248 + isMobile() ? doMobileActions() : doPCActions();
  249 + }();
  250 + </script>
  251 + <script>
65 252 // Vue.component('engine', window.Engine)
66 253 new Vue({
67 254 el: '#app',
68   - data: {
69   - message: 'Hello Vue!'
70   - },
  255 + data: {},
71 256 });
72 257 </script>
73 258 <script>
... ...