iOS11から導入された概念でセーフエリアというものがある。
ノッチや画面したのホームバーにUIが被らないよう、予めそれらのエリアを排除した場所にしかWebコンテンツを配置できないようにされているのである。

この空白は、以下の方法で削除できる。
- viewportに `viewport-fit=cover` を追加
- セーフエリア外にWebコンテンツが表示されないよう、パディングを設定する

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

```css
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/)

Coneta

iPhoneを横向きにした時に発生する左右の余白を消す方法