Web ビューアプレットは、iPhoneX 以降のバージョンの下部にある小さな黒いバーに適応します

背景

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

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

安全地帯

まずはiPhoneの安全領域を見てみましょう

互換性のあるソリューション

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

ステップ 1: viewport-fit 属性を設定する

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

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

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

この問題を解決するために、ios11 の WebKit には新しい CSS 関数 env() と 4 つの事前定義された環境変数が含まれています。safe-area-inset-left、safe-area-inset-right、safe-area-inset-topそしてsafe-area-inset-bottom。これら 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 {
    padding: 12px;
    padding-left: constants(safe-area-inset-left); // ios<11.2
    padding-left: env(safe-area-inset-left); // ios>=11.2
}

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

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

.bottom-bar{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: blue;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-bar {
      padding-bottom: constant( safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

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