Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法

iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ

[fishma]

全国のデザイナさんが「普及するな1代で終われ」と祈っているに違いない

[sucelie]

そもそもlandscapeで見るやつどれほどいるんだよ

[shiromatakumi]

これはクソだと断言して良い

[kfujii]

いやだねえ…

[minimalgreen]

無視したい。

[naosim]

あぁそうか。この話はwebにも影響するのか。忘れてた。。。

[yoshi-na]

スマホ横にしたときの表示は最低限で指定があるときしか対応しないようにしてる…スマン

[higuchill]

ランドスケープ対応は前からやってないけど改めて絶対やらないわ

[lbtmplz]

iosが保管しろ

[lastline]

そもそも横で見るケース少ないよね

[tsuki-rs]

発表前→ワクワク！　発表後→まじかよ最低だな！

[ritzzan]

対策しないと。。

[hajimeyd]

見守る

[s99e209]

bodyタグの背景色を黒色にしてごまかしたいところ。

[yuhiisk]

viewport-fitは使わないだろうね。

[headless_pasta]

これは流石に対応しないとキツいレベルだなー。

[mr_yasai]

こんなもん俺は従来通りに作って「iPhone Xはそういう仕様なんですよー」で押し通すわ。

[simplecore0609]

いい加減足並み揃えてくれないかな…？

[mr_mayama]

国内向けなら対応必須だろうね。

[bottomzlife]

iPhone Xがクソなのはともかくとして、この記事は先日の http://bit.ly/2fz9Xmx の目トレスですかね。コリスクオリティ

[assaulter]

端的に言ってkuso

[ichigaya555]

参考:

[makou]

こんな前時代的な対応しなくてはならんのか。

[penpen-0704]

あんまり横にしてサイト見ないから気づかなかったけど確かにそうだ

[hiragumo]

ほほう

[Lewisik]

見積もりに計上しづらい細かさよな・・

[kagioo2uma]

無視

[lotus_tribal]

御意