電話の隙間iOS11の表示バー

Question

iOS 11のベータ版をダウンロードしてアプリケーションとステータスバー（バッテリと時計の位置）が本体に設定されている背景色ではなく灰色で表示されたばかりです。 iOS 10のアプリで問題が発生していませんでした。

誰も同じ問題がありますか？

ありがとうございました

Answer 1

回答!!あなたの新しいメタタグとしてこれを含めてください！新しいviewport-fit=coverメタタグを追加することに加えて

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover"> 

Answer 2

、あなたはまた、iPhone X上のステータスバーが原因カメラとスピーカー用の切り欠きに20ピクセルより大きいという事実に対処する必要があります。 iOSの11のあなたは新しいsafe-area-inset-*定数を使用して、CSSでこれを自動的に処理することができます

すなわち、padding-top: constant(safe-area-inset-top);

あなたは好奇心旺盛であれば、私はこれらの変更や新しいCSS定数についてもう少し書いた：https://ayogo.com/blog/ios11-viewport/

Answer 3

ビューポートフィット=カバーをビューポートメタタグに追加すると、セーフエリアだけでなく画面全体を満たすようにサイトが拡張されます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

が安全領域-inset- *

注：のSafariのiOSの11のバージョンを必要とすることができる任意の調整を処理するためにも使用することができ、いくつかの定数を含む場合viewport- fit = coverが使用されています。

パディング：定数（safe-area-inset-left）;
.. 安全領域-はめ込まトップ 安全領域-はめ込み右 安全領域-はめ込み、下

安全領域-はめ込み、左