feat: add mobile check

README.md

@@ -35,10 +35,13 @@ Vercel:  [http://dy.ttentau.top/](http://dy.ttentau.top/) (中国推荐访问这
 
 Netlify: [https://douyins.netlify.app/](https://douyins.netlify.app/) (中国以外地区推荐访问这个)
 
+Android Apk: https://github.com/zyronon/douyin/releases
+
 **注意**：`PC` 必须将浏览器切到手机模式，先按 `F12` 调出控制台，再按 `Ctrl+Shift+M`才能正常预览
 
 **注意**：手机请用  [Via 浏览器](https://viayoo.com/zh-cn/)  或 Chrome 浏览器预览。其它浏览器可能会强制将视频全屏，导致无法正常显示
 
+
 ## 免责声明
 
 本项目仅适用于学习和研究，不得用于商业使用

src/App.vue

@@ -6,6 +6,15 @@
       </keep-alive>
     </transition>
   </router-view>
+  <div v-if="!isMobile" class="guide">
+    <Icon icon="mynaui:danger-triangle" />
+    <div class="txt">
+      <h2>切换至手机模式才可正常使用</h2>
+      <h3>1. 按 F12 调出控制台</h3>
+      <h3>2. 按 Ctrl+Shift+M，或点击下面图标</h3>
+    </div>
+    <img src="@/assets/img/guide.png" alt="" />
+  </div>
   <Call />
 </template>
 <script>
@@ -17,9 +26,17 @@ import { mapActions, mapState } from 'pinia'
 import routes from './router/routes'
 import Call from './components/Call'
 import { useBaseStore } from '@/store/pinia'
+import { onMounted, ref } from 'vue'
 
 export default {
   name: 'App',
+  setup() {
+    const isMobile = ref(/Mobi|Android|iPhone/i.test(navigator.userAgent))
+    onMounted(() => {
+      console.log('asdf', isMobile.value)
+    })
+    return { isMobile }
+  },
   components: {
     Call
   },
@@ -96,6 +113,35 @@ export default {
   height: 100%;
   width: 100%;
   position: relative;
+  font-size: 14rem;
+  color: white;
+}
+
+.guide {
+  background: var(--active-main-bg);
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 16rem;
+  overflow: hidden;
+  text-align: center;
+
+  svg {
+    margin-top: 10rem;
+    font-size: 40rem;
+    color: red;
+  }
+
+  .txt {
+    text-align: left;
+    padding: 0 24rem;
+  }
+
+  img {
+    display: block;
+    width: 350rem;
+  }
 }
 
 .go-enter-from {