Fix: [Client] iOS Safari で Home Indicator が画面に被る問題を修正

Safari 今すぐ死んでくれ対応しきれん
tsukumijima · Oct 30, 2023 · 4b0247d · 4b0247d
1 parent dd8ef55
commit 4b0247d
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 14 deletions.
diff --git a/client/public/index.html b/client/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,viewport-fit=cover,initial-scale=1.0,user-scalable=no,interactive-widget=resizes-visual">
+    <meta name="viewport" content="width=device-width,viewport-fit=contain,initial-scale=1.0,user-scalable=no,interactive-widget=resizes-visual">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mizunoko/depot@next/dist/css/common.css">
     <title><%= htmlWebpackPlugin.options.title %></title>

diff --git a/client/src/App.vue b/client/src/App.vue
@@ -22,10 +22,6 @@ body .v-application {
     overflow-x: clip;  // clip なら position: sticky; が効く
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    // iOS Safari で 100vh にアドレスバーが含まれてしまう問題を回避する
-    @supports (-webkit-touch-callout: none) {
-        min-height: -webkit-fill-available;
-    }
 
     .v-application--wrap {
         min-height: 100% !important;
@@ -43,8 +39,6 @@ body header + main {
     padding-top: 65px !important;
     @include smartphone-horizontal {
         padding-top: 0px !important;
-        padding-left: env(safe-area-inset-left) !important;
-        padding-right: env(safe-area-inset-right) !important;
     }
     // ボトムナビゲーションバーの高さ分
     @include smartphone-vertical {

diff --git a/client/src/views/TV/Home.vue b/client/src/views/TV/Home.vue
@@ -531,6 +531,7 @@ export default Vue.extend({
                         }
                         @include smartphone-horizontal {
                             font-size: 15px;
+                            margin-right: 8px;
                         }
                         @include smartphone-vertical {
                             font-size: 15.5px;
@@ -563,7 +564,7 @@ export default Vue.extend({
                         &-force, &-viewers {
                             display: flex;
                             align-items: center;
-                            @include smartphone-horizontal-short {
+                            @include smartphone-horizontal {
                                 span:nth-child(2), span:nth-child(4) {
                                     display: none;
                                 }
@@ -572,7 +573,7 @@ export default Vue.extend({
 
                         @include smartphone-horizontal {
                             &-viewers {
-                                margin-left: 8px !important;
+                                margin-left: 12px !important;
                             }
                         }
 

diff --git a/client/src/views/TV/Watch2.vue b/client/src/views/TV/Watch2.vue
@@ -947,13 +947,9 @@ _::-webkit-full-page-media, _:future, :root .dplayer-icon:hover .dplayer-icon-co
 
 .route-container {
     height: 100vh !important;
-    height: 100dvh !important;
+    height: calc(100dvh - env(safe-area-inset-bottom)) !important;
     background: var(--v-black-base) !important;
     overflow: hidden;
-    // iOS Safari で 100vh にアドレスバーが含まれてしまう問題を回避する
-    @supports (-webkit-touch-callout: none) {
-        height: -webkit-fill-available !important;
-    }
 }
 .watch-container {
     display: flex;