【iPhoneX対応】webサイトのSafe Area対応 簡易版

iPhoneXからSafe Areaというものが導入されました。
Safe Areaにもコンテンツが伸びるようにするためには以下2stepの対応が必要になります。

step1. metaを追加する

<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>

step2. Safe Areaに背景以外のコンテンツが入ってしまわないようにpaddingやmarginの指定を入れる

safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottomをenv()あるいは、constant()に入れてそれぞれ指定する。
iOSのバージョンによって利用できる値が違うので注意が必要です。

iOS11.1以下の場合
constant()を使います。env()は使えません。

.test {
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
}

iOS11.2以降の場合
env()を使います。constant()は使えません。

.test {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

参考記事
https://webkit.org/blog/7929/designing-websites-for-iphone-x/