質問編集履歴

1

試したことの追記

2020/04/30 09:38

投稿

todayyy
todayyy

スコア31

test CHANGED
File without changes
test CHANGED
@@ -157,3 +157,39 @@
157
157
  </html>
158
158
 
159
159
  ```
160
+
161
+
162
+
163
+ ### 試したこと
164
+
165
+ 見やすいようにbodyタグはbackground-colorはblackに設定しています。
166
+
167
+ **1.初期の縦表示(下に余白あり)から横画面で表示した後、再び縦画面で表示すると、余白がなくなる。**
168
+
169
+
170
+
171
+ ![イメージ説明](5970ac8ffa541bd57e0d90ea2944367f.png)
172
+
173
+
174
+
175
+ **2.下記のコメントを参考にmetaタグのviewportのタイプをautoにしたところ、タブバーの余白はなくなったがツールバーの上部に余白ができた。**
176
+
177
+ index.html3行目のviewport-fit=cover → index.html3行目のviewport-fit=auto
178
+
179
+ iPhoneX縦表示用のパッチ有効:index.html 32行目
180
+
181
+
182
+
183
+ ![イメージ説明](fb9e2130d4c44dc6c57a68fbd8f423c0.png)
184
+
185
+
186
+
187
+ **3.viewport-fit = cover + iPhoneX縦表示用のパッチ未使用の場合**
188
+
189
+ index.html3行目のviewport-fit=cover
190
+
191
+ index.html32行目を削除した状態
192
+
193
+
194
+
195
+ ![イメージ説明](10f91dd50104157cc4ed377e34ea8b7c.png)