iOSのセーフエリアとは？CSSでのセーフエリア対策方法

iPhoneやiPadなどのApple製デバイスでは、画面の下部に「セーフエリア」と呼ばれるものが存在しています。

適切な対策を行わずに下部に追従させるコンテンツなどを作成すると、ボタンやリンクを押せなくなってしまう場合もあります。
そのため、今回はCSSで簡単にできるセーフエリア対策についてを紹介します！

iOSのセーフエリアとは
CSSでのセーフエリア対策方法
まとめ

iOSのセーフエリアとは

iOSの「セーフエリア」とは、デバイスの画面上で重要なコンテンツが隠れずに表示されるために確保された領域のことを指します。
特にiPhone X以降のモデルでは、画面上部のカメラまわりや下部のホームインジケーターがセーフエリアに該当しています。

100vhやbottom:0などで指定してしまうと、メニューバーがない場合にこのエリアも表示領域として認識され、ボタンがタップしづらくなってしまったり、デザインの見切れやスクロールによる高さのガタつきが発生してしまいます。
そのため、Webサイトを作成する際にはセーフエリアを考慮したデザインや実装をする必要があります。

CSSでのセーフエリア対策方法

iOSのセーフエリアにはCSSを調整することで簡単に対策することができます！

CSSのenv()関数を利用することで、デバイスのセーフエリアインセットを簡単に取得でき、この機能を活用することで各デバイスのセーフエリアに合わせた実装を行うことが可能です。

まず、metaタグに指定を入れる

iOS11から対応したviewport-fitという画面を挙動をコントロールできるmetaタグの指定をHTMLに入れます。
このタグを入れることで、セーフエリアがある端末では対応するように指示することが可能です。

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

CSSで調整をする

CSSでは下記のようにenv()と書くことでセーフエリアを考慮した位置の指定ができます。
calc()と組み合わせることで、セーフエリアを考慮しつつ指定の余白の確保をすることが可能です。

div {
    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);
}
/* セーフエリアを考慮し、10px空けたい時 */
div {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}