ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ

まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり

[hiroqli]

実機触らないとなんとも言えないけど、セーフエリアもコンテンツを表示するのは、UIは綺麗だけど、UXがクソになりそうな予感がする

[amautt]

しばらくやる気ないけど(Xも導入する予定なし)一応めも

[kyompi]

calc(constant(safe-area-inset-right) + 2.5%);みたいに値を渡してくれるならそこまで手間でもないしiPhoneX対応も現実的な気もしてきた。

[securecat]

セーフエリアの言葉遣いが逆では？　コンテンツが配置されてよい範囲のほうが、セーフエリアでしょ