Web ビューアプレットは、iphoneX の下部と

背景

Apple の iPhone から多くのアプリは、内部の Web ビューのスタイルと直接互換性があります。画面が縦向きモードの場合、上部は多くの場合ナビゲーションバーであり、Web ビューのコンテンツは覆われません。下部の高さは、Web ビューの下部が黒い水平バー領域内に収まらないようにアプリレベルで設定され、Web ビューでのコンテンツの表示を妨げません。

ただし、各アプリは大きく異なり、内部の Web ビューの表示も異なります。アプリの下部の高さが指定されていない場合、Web ビューの下部のコンテンツは小さな黒いバーでブロックされます。 Web ページのスタイルの互換性に関しては、以前のモデルのスタイルに影響を与えることなく、iPhoneX の独特の「前髪」と下部にある小さな黒い横棒のスタイルと互換性がある必要があります。

セーフエリア

まずはiphoneXの安全領域を理解しましょう。下の図の青い部分が安全エリアです。両側の余白、上部の切り込み、下部の小さな黒いバー領域はすべて危険な領域であり、コンテンツがブロックされる可能性のある領域です。次に、コンテンツを安全な領域内で制御する必要があります。

対応ソリューション

幸いなことに、iphoneX が登場したとき、公式の ios11 システムもこのスタイルの違いに対応する WebKit API を提供しました。

ステップ 1: ビューポートフィット属性を設定する

viewport-fit には、auto、contain、fit の 3 つの属性値があります。デフォルトは自動です。
contains: ビジュアルウィンドウには Web ページのコンテンツが完全に含まれており、ページのコンテンツは安全領域に表示されます
カバー: Web ページのコンテンツがビジュアルウィンドウを完全に覆い、ページのコンテンツが画面全体に表示されます
auto: デフォルト値、contain

と一致

デフォルトでは、Safari は以下に示すように、viewport-fit=contain 状況を表示します。ランドスケープモードでは、Web ビューのページコンテンツは安全領域内にあります。ただし、スタイルの観点から見ると、これはあまり美しくなく、iPhoneX が提供するフルスクリーン機能を十分に活用できません。

この問題を解決するために、ios11 の WebKit には新しい CSS 関数 env() と 4 つの事前定義された環境変数 safe-area-inset-left、safe-area-inset-right、 セーフエリアインセットトップおよびセーフエリアインセットボトム。これら 4 つの環境変数は、安全領域からの距離を表します。

safe-area-inset-left: 安全領域と左境界の間の距離
safe-area-inset-right: 安全領域と右境界の間の距離
safe-area-inset-top: 安全領域と上部境界の間の距離
safe-area-inset-bottom: 安全領域と底部境界の間の距離

ios11.2ではconstants()関数を使用していましたが、ios11.2バージョンではenv()関数に変更されました。両方と互換性を持たせるために、両方を記述することができます。

ステップ 2: 安全領域の距離を設定します

.post {
    パディング: 12px;
    パディング左: 定数(セーフエリアインセット左); // ios<11.2
    パディング左: env(セーフエリアインセット左); // ios>=11.2
}

このように、安全領域にない場合、env(safe-area-inset-left) は 0 に等しくないため、コンテンツがブロックされないように、padding-left に安全な距離が設定されます。

上記は「前髪」でブロックされた場合です。実際には、下部の小さな黒いバーがフローティングバーをブロックする場合が多く、加えて属性サポート判定@supports 、内部の CSS は、env(safe-area-inset-bottom)がブラウザーでサポートされている場合にのみ実行されます。

.bottom-bar{
  幅: 100%;
  位置: 固定;
  下: 0;
  背景: 青;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      パディングボトム: 定数(セーフエリアインセットボトム);
      パディングボトム: env(セーフエリアインセットボトム);
    }
  }

注: WeChat の Web ビューは、デフォルトの viewport-fit=cover 状態です。安全な距離を設定するだけで済みます。上記の解決策は WeChat アプレットにも適用できます。