43

Blogブログ

iPhone X でサイトを綺麗に表示する設定いろいろ

iPhone 8 が発売になりましたね。iPhone Xは夫が買うというので自分では買わないことにしましたが、Xcodeをアップデートしたので早速Safariでの表示は確認できるようになりました。
問題の切り欠きディスプレイを見てみたかったのです。

デフォルトの表示だとどうなるか

まずはなにもしないで表示させてみます。

ブログ一覧ページ
ブログ一覧ページ

ブログ一覧ページにメニューを表示
ブログ一覧ページにメニューを表示

フッター
フッター

ブログのコンテンツ例
ブログのコンテンツ例

ダサいですね。

左右に余白をつけないことが前提のデザインなので、余白があることによってめちゃくちゃダサくなります。コンテンツは…まあ、こんなもんでしょう。でもメニュー表示状態とかもう発狂しそうです。ヘッダーメニュー、フッターも背景が途切れているのが気になります。

対策するには、(今のところ)iPhone X 専用のviewportとpaddingの設定が必要になります。

viewportの設定

最初にviewportを設定します。後述しますが、iPhone X用のpadding設定はこのviewport設定がされていないと機能しません。

設定前
<meta name="viewport" content="width=device-width, initial-scale=1">
設定後
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

このviewport-fit=cover”をつけると、全画面表示になるはずです。見てみましょう。

ブログ一覧ページ
ブログ一覧ページ

ブログ一覧ページにメニューを表示
ブログ一覧ページにメニューを表示

フッター
フッター

ブログのコンテンツ例
ブログのコンテンツ例

左右の余白が消えました!

しかし冷静に考えると、これってどうなんでしょうか。
ヘッダーメニューはうまいこと切り欠きの端に収まっているので悪くないんですが、メニューを表示させると端に寄りすぎている感じがします。
メインビジュアルなんかはそれほど違和感ないですが、フッターは地味にボタンとかかぶってるのがイラッときます。コンテンツはもともと枠とテキストの間に余白があるので文字は見えないこともないですが、やはり見づらいことに変わりはありません。
しかも、これまでの画像は切り欠きを右に持っていくように表示させています。これを左にしてみましょう。

切り欠きを左にしてみたところ
切り欠きを左にしてみたところ

これなら余白がある方がマシです。

デザイナーの気持ちとしてはともかく、使い勝手を考えるとそう言わざるを得ません。

paddingを設定する

さて、先ほどiPhone X専用のpadding設定があると言いました。単純に画面いっぱいに表示させたのではうまくいかないところを、これで調整していきます。

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

というのがその設定。普段数値になっているところに見慣れない文字列があります。constantというのは定数で、つまりiPhone X の表示可能領域と定められているスペースの数値がセットされるわけです。
ちなみにmarginやposition:absolute;(あるいはfixed)などに付随するtop、leftなどにも使うことができ、たとえば

.class-name
{
    left: constant(safe-area-inset-left);
    position: absolute;
}

という指定もOKです。こうすると、縦長表示のときは画面左端に、横長表示のときは切り欠きをよけて左端に配置されます。

さて弊社コーポレートサイトの場合、ヘッダメニューとフッターは幅一杯まで表示させたいですが、メニューとフッターの中身には余白を設定したいです。メインのコンテンツは、余白がある方が見やすいように思うのでおおもとの要素に余白を設定します。

ブログ一覧ページ
ブログ一覧ページ

ブログ一覧ページにメニューを表示
ブログ一覧ページにメニューを表示

フッター
フッター

ブログのコンテンツ例
ブログのコンテンツ例

おわかりいただけたでしょうか。メニュー表示とフッターは背景色とベゼルの色が似ていてちょっとわかりづらいですが、ちゃんとメニューの背景は端まで表示し、テキスト部分に余白があるのがわかるかと思います。
なお、フッターはすでに通常のpaddingが設定されているのでちょっと悩んだんですが、paddingを二重に設定することにしました。

{
   padding: 0.2rem 0.1rem 0.9rem;
   padding: 0.2rem constant(safe-area-inset-right) 0.9rem constant(safe-area-inset-left);
}

という具合です。こうすることで、constantを解釈できないブラウザは数値指定、iPhone X のMobile Safariはconstantが設定されることになります。

おまけ

今回のキャプチャのブラウザバーが黒いことに気づいた方は慧眼です。プライベートモードで表示させています。通常モードでリロードしただけではキャッシュがクリアできずCSSがなかなか反映されませんでした。
強制終了で起動し直そうと思いましたがいかんせんマウス操作ではホームボタンが押しづらく、試しにプライベートモードで表示したところわりとうまくいきました。ときどき更新されないことがあるので、そういうときは一旦タブを全部閉じてからプライベートモードで開き直すとすぐ反映します。

参考文献

こちらの記事が大変参考になりました。
Removing the White Bars in Safari on iPhone X – Stephen Radford
iPhone Xを購入せず、無料でウェブページの表示確認を行う方法 (macOS) – Qiita