diff --git a/index.html b/index.html
index 4649a2e..6fd79b2 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
     />
     <title>PlayEdu</title>
     <script src="/js/DPlayer.min.js"></script>
diff --git a/src/components/bar-footer/index.module.scss b/src/components/bar-footer/index.module.scss
index f051303..382fe8d 100644
--- a/src/components/bar-footer/index.module.scss
+++ b/src/components/bar-footer/index.module.scss
@@ -8,9 +8,6 @@
   background: #ffffff;
   z-index: 100;
   box-sizing: border-box;
-}
-@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
-  .footer {
-    padding-bottom: 34px !important;
-  }
+  padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS 11.0 - 11.2 */
+  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS 11.2+ */
 }