Media query for mobile side

tangbc · tangbc · commit 38b38ef89bdd · 2020-04-11T21:16:56.000+08:00
diff --git a/example/public/index.html b/example/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
     <title>vue-virtual-scroll-list</title>
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="stylesheet" href="<%= BASE_URL %>milligram.css" />
diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">documentation</router-link>
+      <router-link to="/">home</router-link>
       <router-link to="/fixed-size">fixed size</router-link>
       <router-link to="/dynamic-size">dynamic size</router-link>
       <router-link to="/horizontal">horizontal</router-link>
@@ -21,14 +21,25 @@ body {
   margin: 0 auto;
   padding: 0 2em;
   width: 776px;
+  @media (max-width: 640px) {
+    padding: 3px;
+    width: 100%;
+  }
 }
 
 #nav {
   padding: 1em 0;
+  @media (max-width: 640px) {
+    padding: 0;
+  }
   a {
     margin-right: 1.5em;
     margin-bottom: .5em;
     display: inline-block;
+    @media (max-width: 640px) {
+      margin-bottom: 0;
+      margin-right: 1em;
+    }
   }
   .router-link-exact-active,
   .router-link-exact-active:hover {
diff --git a/example/src/common/ua.js b/example/src/common/ua.js
@@ -0,0 +1,4 @@
+const ua = navigator.userAgent
+const Android = !!ua.match(/Android/i)
+const iOS = !!ua.match(/iPhone|iPad|iPod/i)
+export const isMobile = Android || iOS
diff --git a/example/src/components/Corner.vue b/example/src/components/Corner.vue
@@ -1,5 +1,5 @@
 <template>
-  <a :href="url" class="github-corner" aria-label="View source on GitHub">
+  <a v-if="!isMobile" :href="url" class="github-corner" aria-label="View source on GitHub">
     <svg :width="size" :height="size" viewBox="0 0 250 250" style="fill:#9b4dca; color:#fff; position: absolute; top: 0; border: 0; right: 0; z-index: 1000;" aria-hidden="true">
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
       <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" style="transform-origin: 130px 106px;" fill="currentColor" class="octo-arm" />
@@ -9,6 +9,7 @@
 </template>
 
 <script>
+import { isMobile } from '../common/ua'
 import getCodeUrl from '../common/get-code-url'
 
 export default {
@@ -17,7 +18,8 @@ export default {
   data () {
     return {
       url: '',
-      size: 80
+      size: 80,
+      isMobile
     }
   },
 
diff --git a/example/src/components/Introduction.vue b/example/src/components/Introduction.vue
@@ -21,5 +21,8 @@ export default {
   padding: .5em 1em;
   border-radius: 3px;
   background-color: ghostwhite;
+  @media (max-width: 640px) {
+    display: none;
+  }
 }
 </style>
diff --git a/example/src/components/Tab.vue b/example/src/components/Tab.vue
@@ -56,6 +56,9 @@ export default {
   display: flex;
   margin-bottom: 1em;
   position: relative;
+  @media (max-width: 640px) {
+    display: none;
+  }
   .tab-item {
     font-size: 14px;
     font-weight: 400;
diff --git a/example/src/views/dynamic-size/Main.vue b/example/src/views/dynamic-size/Main.vue
@@ -27,6 +27,7 @@
 import Item from './Item'
 import Code from './Code'
 
+import { isMobile } from '../../common/ua'
 import { Random } from '../../common/mock'
 import genUniqueId from '../../common/gen-unique-id'
 import { TOTAL_COUNT, TAB_TYPE, DEFAULT_TAB } from '../../common/const'
@@ -39,7 +40,7 @@ while (count--) {
     index,
     name: Random.name(),
     id: genUniqueId(index),
-    desc: Random.paragraph(Random.integer(0, 3))
+    desc: Random.paragraph(Random.integer(0, isMobile ? 1 : 3))
   })
 }
 

Original file line number	Diff line number	Diff line change
`@@ -21,5 +21,8 @@ export default {`
`21`	`21`	`padding: .5em 1em;`
`22`	`22`	`border-radius: 3px;`
`23`	`23`	`background-color: ghostwhite;`
	`24`	`+ @media (max-width: 640px) {`
	`25`	`+ display: none;`
	`26`	`+ }`
`24`	`27`	`}`
`25`	`28`	`</style>`