CSSをiPhoneのフルスクリーンに適応させる方法

1. メディアクエリ方式

/*iPhone X への適応*/
@media 画面のみ、(デバイス幅: 375px)、(デバイス高さ: 812px)、(-webkit-device-pixel-ratio: 3) {
 .固定ボトム{
 下: 37px;
 }
}
/*iPhone XS max への適応*/
@media 画面のみ、(デバイス幅: 414px)、(デバイス高さ: 896px)、(-webkit-device-pixel-ratio: 3) {
 .固定ボトム{
 下: 37px;
 }
}
/*iPhone XR max への適応*/
@media 画面のみ、(デバイス幅: 414px)、(デバイス高さ: 896px)、(-webkit-device-pixel-ratio: 2) {
 .固定ボトム{
 下: 37px;
 }
}

既存の問題: WeChat Webview では、このソリューションにより、要素の下部に安全領域の幅を問題なく追加できます。ただし、Safari などの下部バーがあるブラウザ（ページ表示領域がすでにセーフエリア内にある）では、セーフエリアの幅も追加されます。

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=デバイス幅、初期スケール=1、最大スケール=1、ユーザースケーラブル=いいえ、ビューポートフィット=カバー">

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

.固定ボトム{
 下部: 0;
 下部: 定数(セーフエリアインセット下部);
 下部: env(safe-area-inset-bottom);
}

この解決策は解決策1の問題を解決でき、コードはより簡潔です

フルスクリーン iPhone に CSS を適応させる方法についての記事はこれで終わりです。フルスクリーン iPhone に CSS を適応させる方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。