アダプターiphone X

私たちは、最初にする必要がmetaタグ付けviewport-fit=coverデフォルトviewport-fit=containで、background-size類似しました。
値は次のように設定されている場合coverだけで、他のデバイスと同様に、フルスクリーンで覆われた安全な場所を作るのいずれかの差はフィットしません。
しかし、コンテンツは上部と下部のハードウェアブロックとなり、あなたはブロックされたくない、あなたは頭の下の一定の高さを確保する必要があります。
私たちは、パディング、4つの公式の値を必要とするので、景観の価値が、我々は本体のみプラスのために独自のコンテナにできる4つの値に設定する必要がある場合、ヘッドの下と右に左に直接得ることができます。
constant-top: (safe-area-inset-top)
padding-left: constant(safe-area-inset-left)
padding-right: constant(safe-area-inset-right)
padding-bottom: constant(safe-area-inset-bottom)

• ことに留意すべきであるviewport-fitされていない値coverに設定がconstant()無効です。
• 右側の縦画面が0残っている場合、権利は横画面を離れたときのみの値

コード

メタ

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

CSS

.container {
  overflow: scroll;
  box-sizing: border-box;
  padding-top: constant(safe-area-inset-top);
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-bottom: constant(safe-area-inset-bottom);
}