iPhoneを横向きにした時に発生する左右の余白を消す方法
iOS11から導入された概念でセーフエリアというものがある。
ノッチや画面したのホームバーにUIが被らないよう、予めそれらのエリアを排除した場所にしかWebコンテンツを配置できないようにされているのである。
この空白は、以下の方法で削除できる。
- viewportに
viewport-fit=cover
を追加 - セーフエリア外にWebコンテンツが表示されないよう、パディングを設定する
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover" />
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
参考(https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/)