スマホのセーフエリア処理

いつも調べて忘れるので書き残しておく。

viewportとenv()

大抵フッターエリアのボタンが押しにくいので、viewport-fit=coverを足し、env(safe-area-inset-bottom)をpaddingなどで足してあげればOK

hoge.html

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

fuga.css

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

Javascriptでセーフエリアの値を取得する

CSSのカスタムプロパティを指定すると、JSからも取得しやすい

foo.css

:root {
    --safeareainsetbottom: env(safe-area-inset-bottom);
}

bar.js

getComputedStyle(document.documentElement).getPropertyValue('--safeareainsetbottom')

参考
https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/