CSS / JavaScript : iOS Safari や Chrome のセーフエリア対応

モバイルデバイス、特に iOS デバイスでは、画面の形状やブラウザ UI によって、Web コンテンツの一部が見えなくなったり、操作できなくなったりする問題があります。この問題を解決するために「セーフエリア」という概念が導入されました。

この記事では、モバイルブラウザのセーフエリアに対応するための実装方法を詳しく解説します。

セーフエリアとは

セーフエリアとは、モバイルデバイスの画面上で、コンテンツが確実に表示され、ユーザーが操作できる領域のことです。iPhoneX の登場以降、ノッチ（画面上部の切り欠き）や丸みを帯びた画面の端など、従来の長方形の画面とは異なる形状が増えてきました。

また、iOS Safari や Chrome などのモバイルブラウザでは、アドレスバーやナビゲーションバーなどの UI がコンテンツ領域と重なることがあります。特に iOS 15 以降の Safari では、「シングルタブ」モードで画面下部にナビゲーションバーが表示されるようになりました。

セーフエリアに対応することで、これらの問題を解決し、すべてのユーザーが快適に Web サイトを閲覧・操作できるようになります。

モバイルブラウザでは、以下のような問題が発生することがあります。

ノッチによる干渉: iPhoneX などのノッチがあるデバイスでは、画面上部のコンテンツが見えにくくなる
丸みを帯びた画面端: 最新のスマートフォンでは、画面の四隅が丸くなっており、コンテンツが切れて見える
ブラウザ UI との重複: 特に iOS Safari の「シングルタブ」モードや Chrome では、画面下部にナビゲーションバーが表示され、Web サイトの固定要素と重なる

これらの問題は、固定ヘッダーやフッター、全画面表示のコンテンツなどで特に顕著に現れます。

これらの問題を解決するには、以下の 3 つの要素を組み合わせる必要があります。

まず、HTML の head 内に以下のメタタグを追加します。

viewport-fit=coverは、iPhoneX などのノッチがある端末でも画面全体を使用するように指示します。これにより、Web コンテンツが画面の端まで表示されるようになりますが、同時にノッチや丸みを帯びた部分でコンテンツが見えにくくなる可能性があります。

apple-mobile-web-app-capableとapple-mobile-web-app-status-bar-styleは、ウェブアプリとして追加された場合のステータスバーの表示を制御します。

次に、CSS でセーフエリアを考慮した設定を行います。iOS 11 以降では、env()関数を使用してセーフエリアの値を取得できます。

まず、ルート要素にカスタム変数を定義します。

env(safe-area-inset-*)は、iOS 11 以降で導入されたセーフエリアの値を取得する関数です。ノッチや丸みを帯びた画面の端など、コンテンツが表示されない領域の大きさを取得できます。

--browser-navbar-heightは、iOS Safari や Chrome のナビゲーションバーの高さを定義しています。一般的に 44px です。

JavaScript を使用して、モバイルブラウザを検出し、適切なクラスを body 要素に追加します。

この関数は、以下の処理を行います。

セーフエリアに対応するための一般的な実装パターンを紹介します。

固定ヘッダーは、画面上部に固定表示される要素です。ノッチがあるデバイスでは、ノッチ部分とヘッダーが重なり、コンテンツが見えにくくなる問題があります。

固定フッターは、画面下部に固定表示される要素です。iOS Safari や Chrome のナビゲーションバーと重なり、操作できなくなる問題があります。

全画面表示のコンテンツ（ヒーローセクションなど）では、セーフエリアを考慮して内部のコンテンツを配置する必要があります。

セーフエリアの対応状況は、以下のとおりです。

ただし、ブラウザのバージョンアップによって動作が変わる可能性があるため、定期的な確認が必要です。

モバイルブラウザのセーフエリアに対応するためには、以下の 3 つの要素を組み合わせることが重要です。

これらの対応により、ノッチや丸みを帯びた画面、ブラウザの UI などに関係なく、すべてのユーザーが快適に Web サイトを閲覧・操作できるようになります。

特に重要なポイントは以下の通りです。

これらの対応を行うことで、さまざまなモバイルデバイスやブラウザで一貫した表示と操作性を実現できます。