Fix: [Client] iOS / iPadOS Safari で Home Indicator が UI と被る問題を再度修正

env(safe-area-inset-bottom) は viewport-fit=cover と一緒に定義しないと効かないらしい… 今回の変更によりスマホ横画面では iPhone の場合若干 UI がノッチと被るけど、ちゃんとノッチを避けるのが難しいので妥協してくれ… iPhone 14 Plus サイズのスマホでスマホ横画面用の CSS スタイルが適用されない問題も併せて修正した
tsukumijima · Nov 15, 2023 · f1f08c7 · f1f08c7
1 parent 35daafb
commit f1f08c7
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 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=contain,initial-scale=1.0,user-scalable=no,interactive-widget=resizes-visual">
+    <meta name="viewport" content="width=device-width,viewport-fit=cover,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/components/Watch/Watch.vue b/client/src/components/Watch/Watch.vue
@@ -276,9 +276,18 @@ export default Vue.extend({
 
 .route-container {
     height: 100vh !important;
-    height: calc(100dvh - env(safe-area-inset-bottom)) !important;
+    height: 100dvh !important;
+    border-bottom: env(safe-area-inset-bottom) solid var(--v-background-base);  // Home Indicator 分浮かせる余白の背景色
     background: var(--v-black-base) !important;
     overflow: hidden;
+    // タブレット横画面・スマホ横画面のみ Home Indicator 分浮かせる余白の背景色を var(--v-black-base) にする
+    // 映像の左右の黒い余白と背景色を合わせる
+    @include tablet-horizontal {
+        border-bottom: env(safe-area-inset-bottom) solid var(--v-black-base);
+    }
+    @include smartphone-horizontal {
+        border-bottom: env(safe-area-inset-bottom) solid var(--v-black-base);
+    }
 }
 
 .watch-container {

diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss
@@ -28,13 +28,13 @@
 
 // スマホ横画面
 @mixin smartphone-horizontal {
-    @media (max-width: 1000px) and (max-height: 425px) {
+    @media (max-width: 1000px) and (max-height: 500px) {
         @content;
     }
 }
 // スマホ横画面 (iPhone SE2 などの縦に短いサイズのスマホ)
 @mixin smartphone-horizontal-short {
-    @media (max-width: 680px) and (max-height: 425px) {
+    @media (max-width: 680px) and (max-height: 500px) {
         @content;
     }
 }

diff --git a/client/src/utils/Utils.ts b/client/src/utils/Utils.ts
@@ -210,38 +210,38 @@ export default class Utils {
 
 
     /**
-     * 表示画面がスマホ横画面かどうか
-     * @returns スマホ横画面なら true を返す
+     * 表示画面がタブレット横画面かどうか (メディアクエリの定義は variables.scss と同一)
+     * @returns タブレット横画面なら true を返す
      */
-    static isSmartphoneHorizontal(): boolean {
-        return window.matchMedia('(max-width: 1000px) and (max-height: 425px)').matches;
+    static isTabletHorizontal(): boolean {
+        return window.matchMedia('(min-width: 1000.01px) and (max-width: 1264px) and (max-height: 850px)').matches;
     }
 
 
     /**
-     * 表示画面がスマホ縦画面かどうか
-     * @returns スマホ縦画面なら true を返す
+     * 表示画面がタブレット縦画面かどうか (メディアクエリの定義は variables.scss と同一)
+     * @returns タブレット縦画面なら true を返す
      */
-    static isSmartphoneVertical(): boolean {
-        return window.matchMedia('(max-width: 600px) and (min-height: 375.01px)').matches;
+    static isTabletVertical(): boolean {
+        return window.matchMedia('(min-width: 600.1px) and (max-width: 850px) and (min-height: 850.01px)').matches;
     }
 
 
     /**
-     * 表示画面がタブレット横画面かどうか
-     * @returns タブレット横画面なら true を返す
+     * 表示画面がスマホ横画面かどうか
+     * @returns スマホ横画面なら true を返す
      */
-    static isTabletHorizontal(): boolean {
-        return window.matchMedia('(max-width: 1264px) and (max-height: 850px)').matches;
+    static isSmartphoneHorizontal(): boolean {
+        return window.matchMedia('(max-width: 1000px) and (max-height: 500px)').matches;
     }
 
 
     /**
-     * 表示画面がタブレット縦画面かどうか
-     * @returns タブレット縦画面なら true を返す
+     * 表示画面がスマホ縦画面かどうか (メディアクエリの定義は variables.scss と同一)
+     * @returns スマホ縦画面なら true を返す
      */
-    static isTabletVertical(): boolean {
-        return window.matchMedia('(max-width: 850px) and (min-height: 850.01px)').matches;
+    static isSmartphoneVertical(): boolean {
+        return window.matchMedia('(max-width: 600px) and (min-height: 375.01px)').matches;
     }