iPhone X の Safari における Web コンテンツの表示

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。

思わずクスッときてしまいますが(笑)、まあ当然こんなことにはなりません。

iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外(アプリのタッチイベントを認める領域)を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。

では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか?それを Web 上の情報を元にまとめてみました。

まだ実機が手元にないため細かな部分で間違っている点はあるかもしれませんが、おおよそはこの認識で大丈夫なはず。


標準モード

Default Mode

標準での Portrait モードでは上下に、Landscape モードでは左右にマージンが設けられ、ブルーの部分が Safari とそれに内包される Web コンテンツの表示領域となり得る部分です。

スクロールにより Safari のアドレス バーやタブ バーが隠れたりするのはこれまでと同様で、Landscape モードにおいては Web コンテンツの左右に常にマージンが設定されることになります。

viewport-fit=cover と CSS の特殊値

上述を踏まえると気になってくるのは特に Landscape モードにおける見栄えです。常時マージンが設定されこの部分の背景色はコントロールできないため、サイトによっては意図するデザインができず残念な表示となってしまう可能性があります。

これを避けるため、viewport に新たな値が設けられました。

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

viewport-fit=cover ですね。viewport にこの値を設定することで、Safari の表示領域をフルスクリーンに設定できるようになるそうです。

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

さて。こうなると、ディスプレイの「切り欠き」が冗談でなく邪魔になってくる可能性があります。Landscape モードにおいてはスクロール時に画面の端が常に隠れてしまう部分が発生することとなり、最初に挙げた冗談も嘘とは言えない状況です。

またフルスクリーン表示と言っても、 iOS の新しい「ホームバー」等システムの動作上どうしても必要とする領域は Web コンテンツのタッチイベントは無効となるため、画面の端に設置したボタンやリンクがタップ出来なくなってしまう場合もありそうです。

表示の具体例として以下が挙げられます。

引用: Removing the White Bars in Safari on iPhone X (http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/)

コンテンツ右上に注目すると Menu のハンバーガーアイコンやソーシャルアイコンのうち LinkedIn のアイコンの表示が欠けてしまっています。Menu アイコン部分のタッチイベントは 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 が Safari の表示領域のどのくらい内側に存在するかを示す値です。


viewport-fit=cover および constant(safe-area-inset) の適用

この値は

  • 端末の回転(Portrait モード なのか Landscape モードなのか)
  • フルスクリーン表示なのか通常表示なのか
  • iPhone の機種(iPhone X なのか iPhone なのか)

それぞれの条件に応じて「動的」に変化し CSS に適用されるため、これらの値を利用すれば

  • 状態が変わる毎に JavaScript で計算して CSS に反映させる面倒は無い。
  • iPhone X 以外の iPhone にはデバイスから異なる “safe-area-inset-*” が提供されるため、デバイスによって CSS を分ける必要もない。

というメリットがあります。

つまり、上の具体例においては 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);
}

の様に指定することで

引用: Removing the White Bars in Safari on iPhone X (http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/)

Safe Area 以外の部分に余白を設定できることになります。これでフルスクリーン時においても意図に沿ったデザインで表示を行うことが出来ることになります。

ちなみに、これらの値は padding だけでなく margin なり left 等のポジション プロパティにも有効とのこと。


FYI

“Removing the White Bars in Safari on iPhone X”
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
“Understanding the WebView Viewport in iOS 11 — Ayogo Health Inc.”
https://ayogo.com/blog/ios11-viewport/
“Apple’s iPhone X notch is an odd design choice — The Verge”
https://www.theverge.com/2017/9/14/16306298/apple-iphone-x-screen-notch
“Don’t worry, the hiding scroll bar is even grosser (top-right corner).”
https://twitter.com/BenPackard/status/907785129829036033
“Designing for iPhone X — Fall 2017 — Videos — Apple Developer”
https://developer.apple.com/videos/play/fall2017/801/
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.