iphonexのフルスクリーンh 5の適合

iphonexがオンラインになってからしばらく経ちましたが、業界初の前髪スクリーンモデルとして、フルスクリーンが正常にフルスクリーン表示されなくなりました.
まず、前後の図を見てみましょう.
iPhoneが提供するmetaヘッド

<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">

contain
ビジュアル化ウィンドウには、Webページの内容が完全に含まれています.
cover
Webコンテンツの完全上書き
auto
デフォルトはcontainと同じです
詳細は下図(恥知らずな盗図)を参照してください.
注意:Webページのデフォルトで拡張子を追加しない表現はviewport-fit=containであり、適切なiPhone Xが必要な場合はviewport-fit=coverを設定する必要があります.これは適切な重要なステップです.
ios 11は新しい特性を増加して、webkitのcss関数
前髪のスクリーンに対応するため、アップルも対応策を示した.
css事前定義変数
4つの事前定義変数は、以下のように安全な領域と境界の距離を設定します.

safe-area-inset-left:安全領域距離左境界距離

safe-area-inset-right:安全領域距離右境界距離

safe-area-inset-top:安全領域距離頂部境界距離

safe-area-inset-bottom:安全領域の底部境界距離

safe-area-inset-left
一般的には0
safe-area-inset-right
一般的には0
safe-area-inset-top
前髪全画面でトップ44pxsafe-area-inset-bottom
前髪全画面の条件は34pxです
css関数env()とconstant()
この2つの関数はいずれもwebkitのcss関数であり、変数関数を直接使用することができ、webkitカーネルの下でのみサポートされています.
Env関数
サポートするにはios>=11.2でなければなりません
constant関数
ios<11.2サポートが必要です
The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.
互換性前後バージョンコード

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

次の図を参照してください.
互換性コード
次はscssと書いてあります

.phonex {
  padding-top: constant(safe-area-inset-top); //    +       88px
  padding-top: env(safe-area-inset-top); //    +       88px
  padding-left: constant(safe-area-inset-left); //       0
  padding-left: env(safe-area-inset-left); //       0
  padding-right: constant(safe-area-inset-right); //       0
  padding-right: env(safe-area-inset-right); //       0
  padding-bottom: constant(safe-area-inset-bottom); //         34px
  padding-bottom: env(safe-area-inset-bottom); //         34px
}

完全な検出コード
@supports分離互換モード

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //    +       88px
  padding-top: env(safe-area-inset-top); //    +       88px
  padding-left: constant(safe-area-inset-left); //       0
  padding-left: env(safe-area-inset-left); //       0
  padding-right: constant(safe-area-inset-right); //       0
  padding-right: env(safe-area-inset-right); //       0
  padding-bottom: constant(safe-area-inset-bottom); //         34px
  padding-bottom: env(safe-area-inset-bottom); //         34px
}
@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

@mediaメディアクエリーの使用

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //    +       88px
  padding-top: env(safe-area-inset-top); //    +       88px
  padding-left: constant(safe-area-inset-left); //       0
  padding-left: env(safe-area-inset-left); //       0
  padding-right: constant(safe-area-inset-right); //       0
  padding-right: env(safe-area-inset-right); //       0
  padding-bottom: constant(safe-area-inset-bottom); //         34px
  padding-bottom: env(safe-area-inset-bottom); //         34px
}
// iphonex   
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

最後に
Envとconstantはviewport-fit=coverの時だけ有効で、上で使用したsafariのコンソールはシミュレータの中のホームページがweb inspectorを開くことを検出することができる.
https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com > https://aotu.io/notes/2017/11/27/iphonex/index.html