CSSセーフエリアの属性がiPhone Xで機能しない

Question

私の場合、iPhone XでWebアプリケーションを実行していますが、安全な領域を使用して自分の体を安全な領域にプッシュするために上のパッドを追加しようとしていますウェブキットpadding-top: constant(safe-area-inset-top);とpadding-top: env(safe-area-inset-top);のCSS属性。しかし、Webビューはこれらの属性を正しく評価することはなく、常に0に設定されています。 それを機能させるにはどうすればよいですか。 コード：

body { 
padding-top: 44px; 
    padding-top: constant(safe-area-inset-top); 
    padding-top: env(safe-area-inset-top); 
} 

Answer 1

線 パディングトップ無し：ENV（安全エリアインセットトップ）; これはうまくいくはずです

Answer 2

まず、safe-area-inset-dirは、MacのChromeとSafariでは定義されていません。私の知る限り、SafariのiOS 11デバイスにサイトをロードして、この変数に値があることを確認する必要があります。私はこれがあなたに0pxパディングの問題がある理由であると思われます。

また、iOS 11.2以降、使用するキーワードはenvです。実際には、でもiPhone X design guidelines参照これとはそれのためのサポートを検出するための素晴らしい完全な例を含んでいる：

@supports(padding: max(0px)) { 
    .post { 
     padding-left: max(12px, env(safe-area-inset-left)); 
     padding-right: max(12px, env(safe-area-inset-right)); 
    } 
} 

あなたのためのいくつかのことを行います。このパターン：max以来

• は、標準の一部ではありませんCSSの場合、我々はSafari/Webkitにいることを知っています。safe-area-inset-dirを定義する必要があります（dirは方向です）。
• また、これは、ほとんどのデバイスで必要な「通常の」パディング（この場合は12px）またはiPhone Xを使用している場合に必要なセーフエリアのいずれかに要素のパディングを設定します。これは、iOS 11がiPhone 8はこの変数を0と定義し、それ以外の場合は0pxのパディングになります。