font-size尺寸适配

app.html

@@ -20,6 +20,22 @@
         appendScript('https://cdn.bootcss.com/html5shiv/r29/html5.min.js')
         appendScript('https://cdn.bootcss.com/js-polyfills/0.1.33/polyfill.min.js')
       }
+      if (/(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(w.navigator.userAgent)) {
+        var docEl = d.documentElement
+        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+        var recalc = function () {
+          var clientWidth = docEl.clientWidth
+          if (!clientWidth) return
+          if (clientWidth >= 750) {
+            docEl.style.fontSize = '100px'
+          } else {
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
+          }
+        }
+        if (!d.addEventListener) return
+        w.addEventListener(resizeEvt, recalc, false)
+        d.addEventListener('DOMContentLoaded', recalc, false)
+      }
     })(window, document)
   </script>
 </head>

components/mobile/MobileHeader.vue

@@ -10,8 +10,6 @@
 </script>
 <style>
 .mobile-header{
-  position:fixed;
-  top:0;
   width:100%;
   height:60px;
   display:flex;
@@ -22,7 +20,7 @@
 }
   .mobile-header p{
     flex:1;
-    font-size:2.4rem;
+    font-size:.24rem;
     text-align: center;
     margin-top:10px;
   }

layouts/main.vue

@@ -29,26 +29,6 @@
       isMobile: function () {
         return this.$store.state.option.isMobile
       }
-    },
-    mounted () {
-      if (this.isMobile) {
-        let doc = document
-        let win = window
-        let docEl = doc.documentElement
-        let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
-        let recalc = function () {
-          let clientWidth = docEl.clientWidth
-          if (!clientWidth) return
-          if (clientWidth >= 640) {
-            docEl.style.fontSize = '100px'
-          } else {
-            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'
-          }
-        }
-        if (!doc.addEventListener) return
-        win.addEventListener(resizeEvt, recalc, false)
-        doc.addEventListener('DOMContentLoaded', recalc, false)
-      }
     }
   }
 </script>

pages/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="index">
     <div v-if="isMobile">
-      <Home></Home>
+      <!--<Home></Home>-->
     </div>
     <div v-else>
       <carousel>