iPhone 12系統のレスポンシブ対応のメモ書き

今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。

12 Pro Max

👉 428px (3x)

PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。

12 / 12 Pro

👉 390px (3x)

6〜8、Xや11 Proの375pxよりも15px広い。

12 mini

👉 360px (3x)

ただし、miniの場合は375pxで描写してスケーリング表示するらしい？

とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。

横幅360pxでしっかり表示されていることは必須条件です。

追記1：これからも4インチ(320px)を意識する必要はあるのか？

個人的見解ですが、あります。

理由としてはiPadのSlide Overの論理サイズは320pxだからです…。

「iPhone SE 最高傑作」で検索しても分かる通り、iPhone SEが未だに根強い人気だからって理由もありますね。街歩いていてSE使っている人よく見かけますし。

また、320pxに対応しておけば将来さらに画面の小さいデバイスがリリースされても右往左往しないで済みます。もちろん、320px未満のデバイスが出ないという保証はありませんが…。

320px対応にアレルギー反応がある方や、何らかの事情で320px対応している暇がないという方はJavaScript使って横幅360px未満で表示されたらmeta viewportを<meta name="viewport" content="width=360">に書き換える処理などをしたらいいと思います。（やったことないのでオススメはしない）

追記2：毎年増える解像度に柔軟に対応する方法

一番手っ取り早いのはモバイル端末のみどんな画面幅でもアスペクト比を維持したフルード的な実装をすることです。つまりはサイズ指定の単位を基本vwで実装するってことですね。

原則的にサイズ指定は(オブジェクトの幅/デザインカンプの幅)*100vwでOKなので、vwで実装することだけならそこまで苦ではなかったりします。

ただ、デスクトップ表示では全部vwで実装すると流行りのウルトラワイドモニターでとんでもないことになったり、ブラウザのズーム機能が機能しなくなってアクセシビリティ的な問題が起こったりするので止めたほうがいいです。ズーム機能の問題に関してはremを介するなどで解決できたりしますが…。

追記3：デザイナーに伝えたいこと

スマホ向けとデスクトップ向け（とタブレット向け）のデザインを渡されて「レスポンシブでお願いします」と言われるような現場って多いと思います。

価値観は現場によって異なりますが、カンプ外のサイズは実装者からしたら「どんな感じで実装するんや…」って感想を抱きがちなので、デザイナーの方は

• 320pxではどう見せたらいいか
• 1024px(iPad横向きやiPad Pro 12.9の縦など)ではどう見せたらいいか
• 1920px以上のデバイス(ウルトラワイドモニターなど)ではどう見せたらいいか

を考えて実装者に説明して頂ければ嬉しいかなって感じです。デザインによりますが、意外と1024pxも癖が強かったりします。

要所さえ抑えてあれば実装者も「それっぽく」できるので。

まとめ

まだiPhone 12系統は販売されていないので公式の発表からまとめたものですが、従来のiPhoneと画面サイズに結構な変動があるのでレスポンシブ対応における確認の手間が増えそうかなと。