既にご存じかと思いますが、iPhone Xではディスプレイの形がこれまでのように長方形ではなく、複雑な形になりました。
そこため、アプリやWebページの表示がどうなるのか気になっている方も多いと思います。
Xcode 9のiOSシミュレーターでiPhone Xのシミュレーションができるようになったため、早速いろいろなWebページをiPhone X・iOS 11のSafariで見てみたところ、いくつか思わぬ発見もあったのでまとめたいと思います。
iOSシミュレーターの使い方
macOS SierraでMac App Storeを起動し、Xcodeを最新の9にアップデートします。
El Capitanやそれ以下ではXcode 9はインストールできないのでご注意ください。
Xcode 9を起動し、メニューの［Xcode＞Open Developer Tool＞Simulator］でiOSシミュレーターを起動すると、初期設定でiOS 11のiPhone Xが起動するはずです。
iPhone X各部の名称
iPhone Xで設定アプリを起動し、言語を日本語に変えた直後の画面がこのようになります。
画面上部の通話用スピーカー、全面カメラなどがある部分を センサーハウジング といい、画面下にある黒い水平線を ホームインジケータ と呼びます。
ホームインジケータを指で上に途中までスワイプするとアプリ一覧画面、画面中央より上までスワイプするとホーム画面に遷移します。（iPhone Xにはホームボタン、Touch IDはありません）
余談ですが、画面左上の時計と［設定］見出しの間に妙な間隔がありますが仕様のようです。
画面をスクロールさせると［設定］見出しは画面上に固定表示になります。
Webページを表示する
MacのChromeやSafariなどでWebページを表示し、アドレスバーのURLの前にあるアイコンをiOSシミュレーターのウインドウにドラッグすると、そのページをiPhone XのSafariで開くことができます。
command+Sキーを押すと、枠なしのスクリーンショット（透過PNG形式）がMacのデスクトップに保存されます。
これ以降、そのスクリーンショットを掲載します。
検証: ホームインジケータがコンテンツと被らないか？
私が最も心配していたのはこれです。
結論から言うと、このブログや多くのWebページのフッターの著作権表記部分は、ホームインジケータとかぶって見えなくなるということはなくギリギリ見える位置にありました。（上記左）
ただ、米Yahoo!のニュース記事ページで画面下に表示されているFacebookアイコンとわずかに接触しているといったことはありました。（上記右）
ただ、はてなブックマークのWebページなど、フッターに広告を固定表示しているページで広告の文字とホームインジケータが完全に被ってしまうということがありました。（上記左）
なお、ページの表示直後や下方向にスワイプした時など、ツールバーが出ている状態ではホームインジケータがコンテンツと被ることはありませんでした。ページの一番下の部分はツールバーの上までスクロールされます。（上記右）
なお、「特に画面読み向き時にホームインジケータの水平線が文字などに被って邪魔」ということはありました。
もちろん、スクロールすればホームインジケータとは被らなくなるのですが、かなり気になります。
検証: 画面の角の丸みでコンテンツが欠けないか？
↑のYahoo!のスクリーンショットをご覧いただければ分かるかと思いますが、画面の角が大きく丸くなったためページの端にあるボタンが欠けてしまわないか、タップできなくならないか気になっていました。
結論としては多くのWebページは（ギリギリすぎて少々気にはなるものの）問題ありませんでした。
Yahoo! Japanでは画面下に固定表示されるログインボタンの角が角丸にかなり近いですが、ギリギリ当たっていません。
検証: 画面横向き時にセンサーハウジングに当たらないか？
これは問題ありませんでした。
特にiPhone Xに対応したmeta要素を指定していない場合、つまり多くのWebページではコンテンツは セーフエリア と呼ばれる、センサーハウジングなどを除いた領域に表示されます。
セーフエリアの外は、bodyの背景色が表示されます。
ただ、上記スクリーンショットをよくご覧いただければ分かるかと思いますが、スクロールバーがセンサーハウジングと被った場合、その部分は表示されなくなるようです。これはどうしようもなさそうです。
もし画面の端まで画像などのコンテンツを表示させたいという場合、下記ページにある方法で対応すれば対応は可能です。
セーフエリアと同じ大きさのpaddingを指定する方法についても書かれています。
“The Notch” and CSS | CSS-Tricks
少し意外だったのは、AppleのiPhone Xではこのような対処はされておらず、単純に従来通りのスマートフォンサイトとして表示されています。（写真が画面の端に届いていない）
「WebサイトもiPhone Xに対応しなければ…」と考えている方は多いかもしれませんがAppleもこのような状態ですし、そもそもスマートフォンを横向きにしてWebページを閲覧する方は少ないというアンケート結果もあります。
【お聞かせください】iPhone / Androidなどのモバイル端末でインターネットサイトを見るときに、横持ちで見ることはありますか？
— Fukazawa Kojiro (@witch_doktor) 2017年9月20日
まとめ
iPhone Xは、多くのWebページは問題なく表示できるものの、場合によっては画面の角丸やホームインジケータにコンテンツが被ってしまい、見づらくなることもあります。
一般的なWebサイトの確認であれば、私はMacのXcodeに付属のiOSシミュレータで十分ではないかと思います。
複雑なWebアプリを大規模開発されている場合や、iOSネイティブアプリも開発されている場合はiPhone Xの実機もあった方が良いかもしれません。
なお、10月から開催予定の「スマートフォン時代のWebコーディングスクール」ではこのような状況を踏まえ、これからスマートフォン対応のWebページを制作する方向けに、以下のことを分かりやすく解説する予定です。
- iPhone Xの表示確認をiOSシミュレータで行う
- スマートフォン対応のWebページをiPhone Xに対応する方法
10/1、10/5には 体験レッスン もございますので、ぜひお越しください。
