現行のスマートフォンのCSSビューポート幅はおよそ360〜440ピクセル、タブレットは744〜1032ピクセルです。コンパクトなAndroidは360、iPhoneは375〜440、大きめのAndroidは412以上、iPad miniは744、11インチと13インチのiPadは820〜1032になります。このページでは機種ごとの数値を挙げ、Androidの数値が情報源によってずれる理由を説明し、最後にテストすべき幅を短くまとめます。
下のプレビューでデバイスを選び、URLを入力すると、自分のサイトをそのサイズで確認できます。
押さえておきたい幅
全機種をテストする必要はありません。次の幅で実際のばらつきをほぼカバーできます。
| CSS幅 | 代表的な機種 | 確認する理由 |
|---|---|---|
| 320 | iPhone SE(第1世代)、Split ViewのiPad | 何も崩れてはいけない最小の幅 |
| 360 | Galaxy S24・S25、OPPO A6x、多くのミドルレンジAndroid | コンパクトなAndroidの標準的な幅 |
| 375 | iPhone SE(第2・第3世代)、miniモデル | 古いiPhoneでまだ使われている |
| 390〜393 | iPhone 14〜16、Redmi Note 14 | iPhoneの主流の幅 |
| 402 | iPhone 17、17 Pro、18 Pro | 現行の標準的なiPhone |
| 412〜414 | Pixel 7〜10、Galaxy S24+・Ultra | 大きめのAndroidの標準的な幅 |
| 430〜440 | iPhone Plus、Pro Max | 通常のスマホで最も広い |
| 744〜768 | iPad mini、旧9.7インチiPad | 小型タブレット |
| 820〜834 | iPad(A16)、iPad Air 11、iPad Pro 11 | 標準的な縦向きタブレット |
| 1024〜1032 | iPad Air 13、iPad Pro 12.9・13 | 縦向きの大型タブレット、横向きの小型ノートPC |
Androidスマホ:情報源ごとに数値が違う理由
Androidには公式の一覧表がなく、公開されているリストも食い違っています。Screen Size CheckerはGalaxy S25+のビューポートを412 × 891としていますが、WhatIsMyScreenSizeでは480 × 1040です。どちらもパネルの解像度を推定したピクセル比で割っており、Androidのピクセル比は2.625、3.125、3.25のように小数であることが多いため、推定が少しずれるだけで幅が数十ピクセル変わります。両サイトとも、数値は概算だと明記しています。
下の表は、情報源の数値が一致するもの、または当サイトのツールにプリセットとして入っている機種の値を使い、それ以外は概算と記しています。
| 機種 | CSSビューポート(縦向き) | ピクセル比 |
|---|---|---|
| Galaxy S24、S25 | 360 × 780 | 3 |
| OPPO A6x | 360 × 785 | 2 |
| Galaxy S24+、S24 Ultra、S25 Ultra(概算) | 412 × 891 | 3.5 |
| Pixel 8 | 412 × 915 | 2.625 |
| Pixel 9、Pixel 10 | 412 × 923 | 2.625 |
| Pixel 9 Pro、Pixel 10 Pro | 410 × 914 | 3.125 |
| Pixel 9 Pro XL、Pixel 10 Pro XL | 414 × 921 | 3.25 |
| Galaxy Z Fold6、カバーディスプレイ | 323 × 792 | 3 |
| Galaxy Z Fold6、展開時 | 619 × 720 | 3 |
折りたたみ端末があるため、360未満の幅と、620〜720あたりの幅も確認しておく価値があります。展開するとスマホとタブレットの中間になり、両端だけを想定したレイアウトは間延びして見えることがあります。
iPhone
iPhoneの幅はよく整理されています。初代SEの320からPro Maxの440までで、その間に375、390、393、402、420、430があります。解像度とピクセル比を含む一覧はiPhoneビューポートの一覧表にあります。
iPadとその他のタブレット
縦向きのタブレットのビューポートです。出典はScreen Size CheckerのiPad一覧です。横向きでは幅と高さが入れ替わり、iPadのピクセル比はすべて2です。
| モデル | CSSビューポート(縦向き) |
|---|---|
| iPad mini(A17 Pro、第6世代) | 744 × 1133 |
| iPad(第9世代) | 810 × 1080 |
| iPad(第10世代、A16)、iPad Air 11 | 820 × 1180 |
| iPad Pro 11(2018〜2022年) | 834 × 1194 |
| iPad Pro 11(M4) | 834 × 1210 |
| iPad Air 13、iPad Pro 12.9 | 1024 × 1366 |
| iPad Pro 13(M4) | 1032 × 1376 |
iPadは表から想像するより厄介です。まず、iPadのSafariは標準でデスクトップ版のサイトを要求するため、820ピクセル幅でもデスクトップ向けレイアウトが返ってくることがあります(ChromeでiPadとしてサイトを表示する方法を参照)。次に、マルチタスクでウィンドウが狭くなります。Maximiliano Firtman氏のビューポートのメモでは、Split ViewとSide Viewの幅は320〜694ピクセルとされており、タブレット向けレイアウトがスマホ並みの幅で表示されることもあります。viewportメタタグがない場合、同じメモによればiPadでは980ピクセルのレイアウトになります。
手元のデバイスで実際のサイズを確認する
参照表はあくまで出発点です。お使いの端末が何を返すかは、ブラウザのコンソール、またはそれを表示するページで次のコードを実行すると分かります。
`${innerWidth} × ${innerHeight} @ ${devicePixelRatio}x`結果は設定で変わります。Samsungの画面ズームと表示サイズ、ブラウザの文字サイズ、アドレスバーが折りたたまれているか、向きなどです。高さが常に変わる理由はビューポートサイズとはで説明しています。
テストすべき幅
Androidは360と412、iPhoneは390と402、タブレットは744と834を確認し、さらに限界を見る320と、スマホ1台・タブレット1台の横向きを加えます。これらの数値をブレークポイントにしないでください。機種に合わせたブレークポイントはすぐに古くなるため、レスポンシブのブレークポイントは自分のレイアウトが崩れる位置に合わせて決めます。サイズは確認用で、全体の手順はレスポンシブデザインのテスト方法にまとめています。
よくある質問
モバイルサイトは何ピクセルを基準に設計すればよいですか。
幅360〜390ピクセルから始め、440ピクセル前後まで伸縮するレイアウトにします。コンテナにピクセル固定の幅を指定しなければ、320ピクセルや展開した折りたたみ端末でも問題なく動きます。
スマホの画面サイズとビューポートは同じですか。
違います。画面解像度は物理ピクセルの数で、ビューポートはCSSピクセルの数、つまり解像度をピクセル比で割った値です。1206 × 2622のiPhoneの画面は、402 × 874のビューポートになります。
手元のスマホの数値が、この表と違うのはなぜですか。
参照リストはピクセル比を推定しており、実機にはさらに独自の表示サイズ、ズーム、ブラウザ設定が加わります。数値が違う場合は、自分のブラウザが示す値を信頼してください。
出典:Screen Size CheckerのAndroidとiPadのリスト(データ確認日2026年9月24日、サイト側で未検証と表示されている値を含む)、WhatIsMyScreenSize、AndroidのCSSビューポート(2026年7月31日、概算)、Maximiliano Firtman、viewports、YesViz、Galaxy S25。数値を使う前に、お手元の端末で確認してください。