IphoneX への適応の鍵は、ページをノッチ、下部の操作領域、および大きな丸い角にどのように適応させるかです。
他の携帯電話と比較した場合、IphoneX の違いは、デバイスにも 1 つの画面がありますが、実際には複数のモジュールに分かれていることです。詳細については、以下の図を参照してください。
通常の Web ページを X に移動すると、コンテンツは安全領域にのみ表示され、非安全領域には Web コンテンツが表示されません。つまり、先頭と下部に白いブロックが表示されます。それに対処するには？
解決1.本文に背景色を追加するなぜ背景色を追加するのでしょうか?何の役に立つの？ 先ほど述べた頭と尻に白い斑点があることに注意してください。実際、この色は体の背景の色から来ているため、白であると言うのは正確ではありません。さらに、コンテンツをプルアップまたはプルダウンすると、Web ページの下部にあるコンテンツと色が表示されますが、これは実際には本文の背景色です。したがって、これら 2 つの効果を変更したい場合は、ボディの背景色を設定できます。
2. viewport-fit = coverの<meta>タグを追加します。このステップは非常に重要です。まずは結果を見てみましょう:
コードをコピーする