iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

[otchy210]

このパターン、これまでも何度も見て来たけど、結局シェアの暴力で対応せざるを得ない的なやつ。IE に既視感あるな。

[tomo_p]

仕事を増やさないで頂きたい

[popup-desktop]

viewport-fit=coverさえ使わなければ特に気にしなくて良いよって話かしら。

[Falky]

いや、つーか、みなさんスマホの横画面表示なんて表示保証して納品してるんですか？？？そんな案件一度も扱ったことないし、よっぽど特殊なケースじゃない限り、そんな作業に金払ってくれる客なんかいないでしょ…

[take-it]

知識としては知っておきたいけど、iPhone Xからの閲覧率も、コンバージョン率も3%ならんだろから、正直無視していい気がする。それなら他のことに工数かけた方がマシ。

[renos]

viewport-fit=cover使わなければ…まぁ…いいのかな…？

[metamix]

経験則だけど、IEの独自対応は悩まされてる人が多いので対策が見つかりやすいが、モバイルSafariの不具合は原因がさっぱり分からず消費する時間コストはこっちの方が全然多い

[lyiase]

IEみたいだとコメントしてる人がいるが、IEはそもそも標準的な動きをしなかったのだが。これは標準的な動きからは逸脱してないし、標準モードなら特に気にすることもない。あとそもそもviewportって標準化してない

[circled]

海外勢：「notchを利用して笑えるUI作ったwww」「こんな簡単にiPhone Xに対応出来る方法見つけた。」日本勢：「iPhone Xのデザインは糞。死ね、Apple！」ってのを見てると優秀な奴は海外にしかいない雰囲気、本気でヤバイ。

[imaginaration]

独自拡張やめてくれ。。

[hirorock]

css ノッチ

[nilab]

「“safe-area-inset-*” が示すとおり、上述のアプリのタッチイベントを認める領域である Safe Area が Safari の表示領域のどのくらい内側に存在するかを示す値です」

[mitsuhi0909]

かなり面倒だな

[pmakino]

こりゃなかなか面倒くさいですね

[mzkzzz]

めんどくささがすごい

[glat_design]

viewport-fit=coverとconstant(safe-area-inset-*)値 /

[jhoshina]

めんどくせぇなおい

[headless_pasta]

実機が手に入ってから確認しつつ対応するか。

[tttttahiti]

正直記述が増えるしデザイナーさんも面倒だと思うけど、プロダクトのリリース前から対応策を考えられてるのはまだよかったのかも……

[solidstatesociety]

発注側のおっさんが上どうにかならんの？っていい出したらどうするかが課題

[Hamukoro]

こんなハックまみれのCSSは美しくない。ジョブズが生きていたら(ry

[nana_07]

こういう記事見るとX欲しくなってしまう

[hush_in]

標準モードだけなら特に気にすることないだろうけどメモ

[mh615033891]

#memo

[asterisknautz]

Web App的にはありがたい情報。

[chemisteacher]

ほんとデザイナー泣かせ・・・・

[mrkn]

viewport-fit=cover を指定したい時だけ特殊な指定が必要なんだから、今まで通りで問題ないってことですよね？

[yamadar]

いやー、この機種のためだけに存在するCSSってどうなのよ。iPhoneはこのデザインのままずっと続けるの？

[isseium]

“safe-area-inset-*”

[marmot1123]

これ、Webサイト側が対応するの？さすがに筋が違うのでは？

[perl48]

こういう風にソッコーで最先端を追いかける人がいてくれるおかげで、普及するころにはデファクトスタンダードな実装ができるんだろうなぁ。ありがたい。

[gfx]

大変そう。

[tsuki-rs]

iPhoneXの為に余分な記述が増えるんだね。。

[tyru]

つらそう。Touchbar といい最近 Apple なんでこういう所で色気出したがるのん…

[z1h4784]

一応これで対応はできそうか。実機がしばらく手に入らなそうなんで、実機検証しろと言われても困るけど。

[cv63kittyhawk]

記念モデルとかは実験的な技術かデザイン使われるフシがあるよな

[delphinus35]

趣味でやるのは楽しい、仕事ではツライ。いつものことのようだ。自分は前者。

[Dugong01]

まぁ通常表示ならデフォの余白があるから既存サイトや動画への問題は解決されるとして、大手や一部のオサレサイトだとこういう対応が必要になってくるのか

[Rinta]

なるほどねー。さすがにAppleの技術者もバカではない。

[algot]

youtubeで全画面表示した時にあの出っ張りを意図したアニメーションとか出てくるだろうな