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

ONO TAKEHIKO
Sep 15, 2017 · 8 min read

標準モード

Default Mode

viewport-fit=cover と CSS の特殊値

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

<meta name="viewport" content="viewport-fit=cover">
<meta name=”viewport” content=”viewport-fit=cover”>
引用: Removing the White Bars in Safari on iPhone X (http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/)
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

viewport-fit=cover および constant(safe-area-inset) の適用
  • フルスクリーン表示なのか通常表示なのか
  • iPhone の機種(iPhone X なのか iPhone なのか)
  • iPhone X 以外の iPhone にはデバイスから異なる “safe-area-inset-*” が提供されるため、デバイスによって 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/)

FYI

ONO TAKEHIKO

Written by

Web Designer and Frontend Engineer. Director at aguije inc.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade