iPad MiniからiPad Pro 13"までのiPadビューポートサイズ
iPad Mini、iPad Air、iPad Proモデルをカバーする完全なiPad CSSビューポートサイズリファレンス。ポートレートとランドスケープの両方向のサイズを含む。
詳細な説明
iPadビューポートサイズリファレンス
iPadはタブレットセグメントを占め、ビューポート幅は744px（iPad Mini）から1032px（iPad Pro 13"）まであります。企業、教育、クリエイティブワークフローで広く使用されているため、これらのサイズを理解することは重要です。
iPadモデル比較
| モデル | CSS幅（ポートレート） | CSS高さ（ポートレート） | DPR |
|---|---|---|---|
| iPad Mini (第6世代) | 744px | 1133px | 2x |
| iPad (第10世代) | 820px | 1180px | 2x |
| iPad Air (第5世代) | 820px | 1180px | 2x |
| iPad Pro 11" | 834px | 1194px | 2x |
| iPad Pro 12.9" | 1024px | 1366px | 2x |
| iPad Pro 13" (M4) | 1032px | 1376px | 2x |
Split ViewとSlide Over
iPadでは、ユーザーはSplit View（2つのアプリを並べて表示）とSlide Over（フローティングアプリパネル）を頻繁に使用します。Split Viewでは各アプリが画面幅の約半分を使うため、大型iPad Proでもアプリが約400-500px幅で表示される可能性があります。これらの狭い幅でも適切に表示されるレイアウトを設計してください。
768pxブレークポイント
従来の768pxブレークポイントは、初代iPadのポートレート幅に由来します。新しいiPadはより幅広い（820px以上）ですが、Bootstrap、Tailwind、Material UIの主要ブレークポイントとして使用されているため、768pxは依然として有効です。iPad Miniのポートレート方向もキャッチします。
ランドスケープ方向
すべてのiPadビューポート値は、デバイスが回転すると幅と高さが入れ替わります。ランドスケープのiPad Airのビューポートは1180x820で、ほとんどのCSSフレームワークの「デスクトップ」範囲にしっかりと入ります。タブレット最適化レイアウトはランドスケープモードでは適用されない場合があります。
ユースケース
社内支給のiPad Proデバイスに展開されるダッシュボードを構築するエンタープライズアプリケーション開発者が、iPad Pro 11"と12.9"のポートレートとランドスケープの両方向でレイアウトを最適化する必要がある場合。