1. TOP
  2. ■デザイン工房
  3. レスポンシブWebデザインのブレークポイントとデバイスの画面サイズ

レスポンシブWebデザインのブレークポイントとデバイスの画面サイズ

写真、デバイスサイズ

レスポンシブWebデザインのブレークポイントを決める

<<決定したブレークポイント>>
●600px
599以下:6インチ以下のスマートフォン
600〜767:7インチクラスのタブレット
●768px
768〜1039:8〜10インチクラスのタブレット(iPad)
●1040px
1040以上:PC,デスクトップ

<主要なタブレット&スマートフォンの画面サイズ>

主要なスマートフォンやダブレット ブラウザの画面サイズ
(ピクセル)
iPhone4 /4s 320×480
iPhone5/5s/5c
iPhoneSE
320×568
Nexus5 360×640
iPhone6/6s
iPhone7

375×667

Nexus6

412×732

iPhone6Plus/6sPlus
iPhone7Plus

414×736

Nexus7

600×960

iPad Mini 2,3,4

768×1024

iPad 3,4,
iPad Air
iPad Pro 9.7

768×1024

Nexus10 800×1280
iPad Pro 12.9

1024×1366