iPad用のブレイクポイントを「834px」に変更

第７世代のiPadを購入したのですが、以前と比べて画面のサイズが大きくなっており、自サイトを閲覧すると崩れて表示されていました。

今まではメディアクエリのブレイクポイントを「768px」で設定しており、ChromeのデベロッパーツールでもiPadが「768px」となっていますが、これでは小さいのではないかと感じています。

ブレイクポイントを第７世代iPadの実機で確認してみると、「809px」では反応なし、「810px」からはレスポンシブで表示されましたが、max-device-width: 810pxあたりまで上げないと正常に表示されません。

最近のiPadはサイズが1620pxと大きめになっているため、Retinaで倍になっているとしても、ブレイクポイントを「810px」まで上げる必要があると感じています。

さらに大きな画面のiPad Proは「2,388 x 1,668ピクセル解像度」となっており、Retinaなので２で割ると「834px」となります。そのため、iPad Proまで対応して最終的にはブレイクポイントを「max-device-width: 834px」に設定しておきました。

加えて、さらに大きい12.9インチiPad Proの端末では「2,732 x 2,048ピクセル解像度」となっているため、この場合は1024pxが必要な計算になりますが、この大きさだとノートパソコンとかぶる気もしており、こちらはPC用の画面で表示することにしました。

大手メディアの場合、iPadについてはviewportでのwidthをdevice-widthではなく、1000px程度の実数で決め打ちをし、PC用をそのまま縮小して表示しているケースもありますが、わたしはfloatを解除してスマホのように表示させています。

iPadでデスクトップと同じように表示させてしまうと、やはり文字が小さくなって読みづらい気がしますので、floatを解除して文字サイズを大きめに設定した方がいいと思います。

ちなみに、スマートフォンについては今までどおり「480px」にしていますが、旧SEで320px、iPhone Plusでも「414px」のため、スマホのブレイクポイントは「480px」もあれば十分だと思います。