CSSをiPhoneの全画面に適応させる方法

1. メディア クエリ メソッド

/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

既存の問題: WeChat ウェブビューでは、このソリューションは要素の下部に安全領域の幅を追加できますが、問題ありません。ただし、Safari などの下部バーのあるブラウザ (ページ表示領域がすでに安全領域内にある) では、安全領域の幅も追加されます。

(ビデオチュートリアル: css ビデオチュートリアル)

2. CSS 関数

全画面起動後に Apple が提供する CSS 関数、ios<11.2は constant()、ios>11.2 は env() です。セーフエリアの上下左右の幅に対応して、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottomを入力できます。 。 env と constant は、viewport-fit=cover の場合にのみ有効です。

コードは次のとおりです。

メタタグを追加しましたviewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

cssの記述方法、envとconstantをサポートしていないブラウザはこのスタイルを無視します

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

推奨チュートリアル: CSS 基本チュートリアル

以上がCSSをiPhoneの全画面に適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。