diff --git a/core/core-frontend/mobile.html b/core/core-frontend/mobile.html
index a0901557f2..beca7603cc 100644
--- a/core/core-frontend/mobile.html
+++ b/core/core-frontend/mobile.html
@@ -1,13 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DataEase</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/pages/mobile/main.ts"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+  <title>DataEase</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/pages/mobile/main.ts"></script>
+</body>
+
 </html>
diff --git a/core/core-frontend/src/views/mobile/index.vue b/core/core-frontend/src/views/mobile/index.vue
index 46b416cfd0..ecd28ee019 100644
--- a/core/core-frontend/src/views/mobile/index.vue
+++ b/core/core-frontend/src/views/mobile/index.vue
@@ -26,7 +26,7 @@ const hiddenTabbar = ref(false)
       @hiddenTabbar="val => (hiddenTabbar = val)"
     ></Directory>
     <Personal v-else-if="activeTabbar === 'user'"> </Personal>
-    <van-tabbar v-if="!hiddenTabbar" v-model="activeTabbar">
+    <van-tabbar safe-area-inset-bottom v-if="!hiddenTabbar" v-model="activeTabbar">
       <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
       <van-tabbar-item name="direct" icon="bars">目录</van-tabbar-item>
       <van-tabbar-item name="user" icon="user-o">我的</van-tabbar-item>
@@ -40,20 +40,9 @@ const hiddenTabbar = ref(false)
 </template>
 
 <style lang="less">
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-@supports (-webkit-touch-callout: none) {
-  body {
-    min-height: -webkit-fill-available;
-  }
-}
 .mobile-index {
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   overflow: hidden;
 }
 </style>
diff --git a/core/core-frontend/src/views/mobile/login/index.vue b/core/core-frontend/src/views/mobile/login/index.vue
index e06e152e02..6ed93e1b26 100644
--- a/core/core-frontend/src/views/mobile/login/index.vue
+++ b/core/core-frontend/src/views/mobile/login/index.vue
@@ -101,24 +101,9 @@ const onSubmit = async () => {
 </template>
 
 <style lang="less">
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-@supports (-webkit-touch-callout: none) {
-  body {
-    min-height: -webkit-fill-available;
-  }
-}
-#app {
+.de-mobile-login {
   height: 100vh;
   width: 100vw;
-}
-.de-mobile-login {
-  height: 100%;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
