フロントエンドは、Apple LiuHaipingおよびAndroidLiuHaipingウォータードロップボトルと互換性があります
iOSとAndroidの継続的な更新。さまざまな画面の適応は本当に頭痛の種です。
さまざまなプロジェクトがアプリにパッケージ化されると、それらはオンラインになります。一部のフルスクリーン携帯電話では、常に次の状況が発生します.1、3は正常な状態（iphone11 Weibo）、2、4は適応の問題（iphone11の特定のアプリ）です。Androidでもこの問題が発生します。このような問題の場合、以下に、この問題の解決策を示します。
実際、w3cは長い間ソリューションを提供してきました（CSS3の新機能ビューポートフィット）
w3c.orgが提供する標準のラウンド表示については、viewport-fitの属性が記載されています。この属性は、画面が長方形ではない一部のデバイスでブラウザがviewport-fitを実行する方法を示します。LOL送信：ビューポートフィットの公式リファレンスドキュメント
CSS3の新機能envおよびvarの定義済み変数。
ビューポート修正を定義した後、ブラウザは4つのパディング変数を自動的に生成します。これらの変数は、ページを通常どおり表示できる位置まで内側に押し込むために使用されます。現時点では、envまたはconstantを使用して変数をCSSプロパティ値に変換し、それらをプロパティに割り当てる必要があります。ps：envは開発中のようで、IOS11.2以降のみをサポートしているようです。現在のより安全な方法は、constantとenvを一緒に使用することです。LOL送信：envおよびvar変数の説明
詳細なアプローチ
| viewport-fitの値は次のとおりです。 | |
|---|---|
| 自動 | デフォルト：viewprot-fit：contain;ページのコンテンツは安全な領域に表示されます |
| カバー | viewport-fit：表紙、ページコンテンツが画面いっぱいに表示されます |
まず、この属性
viewport-fit = cover "を追加します（最も重要なコードは、以下のコードを追加しないと問題が発生する可能性があることです）
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
/* body 在横屏底下和竖屏底下一定要做好定位，不然*/
/* 竖屏底下的查询 */
@media screen and (orientation: portrait) {
body {
/* 防止页面被刘海遮住 */
padding-top: constant(safe-area-inset-top);
//以防万一写一个你本身适配其他手机的
padding-top:0px;
}
}
/* 横屏底下的查询 */
@media screen and (orientation: landscape) {
body {
/* IOS 11支持*/
padding-right: constant(safe-area-inset-right);
padding-left: constant(safe-area-inset-left);
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
/*IOS 11.2版本版本支持*/
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
padding-bottom: env(safe-area-inset-bottom);
//以防万一写一个你本身适配其他手机的
padding-right:0px;
padding-left:0px;
padding-bottom:0px;
}
}
如果用header和footer请单独定义