CSSでiPhone Xのブラウザ表示領域を調整する方法

iPhone Xには上下にディスプレイの切り欠き部分が存在します。

ここはiOSの専用の領域なのでWebページなどのコンテンツなどが表示されることがありません(Safe Areaと言います)。この切り欠きの部分には時計やアンテナなどのiOSのシステムに関するアイコンなどが並びます。

今回はそんなiPhone XでWebサイトを表示する場合にどのように表示されるかについてお話しします。

 

標準モードの場合

標準の縦画面(Portraitモード)では上下に、Landscape モードでは左右に占有領域が確保され、ここにコンテンツが表示されることはありません。

スクロールでアドレスバーの表示・非表示が切り替わるものこれまでと同じです。つまり、Landscapeモードでは常に左右に空間が設けられていることになります(コンテンツの表示には影響ありません)。

 

しかし、Landscapeモードは常に空間が空いているため、背景色などのコントロールができません。するとサイトによっては背景色が合わなくなったり、意図したデザインにならない可能性があります。

 

viewport-fit=cover

これを回避するためのviewportが新たに作られました。

<meta name="viewport" content="viewport-fit=cover">

 

viewport-fit=coverの部分ですね。

これによって左右の空間も含めたコンテンツの表示ができるようになり、背景色と合わなくなる心配もありません。iOS専用の領域にもコンテンツが表示できるようになります。

 

ディスプレイの切り欠きを回避する

iOS専用の空間にコンテンツが表示されるようになったのはいいものの、今度は切り欠きのせいで画面端のコンテンツが欠けたり、タップできなくなる可能性が出てきます。

タップ領域がiOS専用の領域と被っているので、最悪そのページのメニューが使えなくなる可能性などがあります。

 

これを回避するためにもCSSに新たな値が用意されました。

constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

 

「safe-area-inset-○○」という値ですね。

Safe AreaがWebページの表示領域のどれくらい内側に存在するかを定義する値です。

 

また、この値はiPhone Xがどのような条件で表示されているかによって動的に変わるので、状況が変わるたびにJavaScriptで計算したり、デバイスによってCSSを分けたりする必要がありません。

指定するときは以下のように記述しましょう。

.container {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
}

 

これでフルスクリーンの状態でも切り欠きに左右されず、背景色などのデザインは揃ったまま綺麗に表示することができるようになります。

ちなみにこれはpaddingやmargin、leftなどポジションを決めるプロパティにも有効なので、使い勝手もなかなかですね。