画面横幅ピクセル

サイト制作時の想定View Port

世の中にはスマホやタブレットの種類がたくさんあるわけですが、それぞれ画面のサイズが異なれば解像度も異なるわけで。制作時には全機種に対応したいところですが、やればやるほど大変なのは悩ましいところ。正確にはそれぞれの画面解像度に対応ではなく、それぞれの機種のView Portを考慮することになります。メモ代わりに一覧表をおいておきます。

ちなみに、中の人は実機を持ってないのと日本ではシェアが低いのでAndroid固有のサイズ対応はスルーです。それでも、320、375、414、768、1024、1920の6種類は実機チェックするので手間はかかります。

View Port 値(横幅)機種
320iPhone 5
iPhone 5s
iPhone 5c
iPhone SE
375iPhone 6
iPhone 6s
iPhone 7
iPhone 8
iPhone SE(2世代)
iPhone X
iPhone XS
iPhone 11 Pro
iPhone 12 mini
390iPhone 12
iPhone 12 Pro
414iPhone 6 Plus
iPhone 6s Plus
iPhone 7 Plus
iPhone 8 Plus
iPhone XR
iPhone 11
iPhone XS Max
iPhone 11 Pro Max
428iPhone 12 Pro Max
768iPad mini
iPad mini 2
iPad mini 3
iPad mini 4
iPad mini(5世代)
iPad
iPad 2
iPad 3
iPad 4
iPad Air
iPad Air 2
iPad Pro 9.7
810iPad(7世代)
820iPad Air(4世代)
834iPad Pro 10.5
iPad Air(3世代)
iPad Pro 11
1024iPad Pro 12.9
1920フルHD
View Port 値(横幅)機種
320Andoroid モバイル Sサイズ
360Andoroid モバイル Mサイズ
480Andoroid モバイル Lサイズ
600Andoroid タブレット Sサイズ
768Andoroid タブレット Mサイズ
800Andoroid タブレット Lサイズ

View Portまとめ

一覧表の内容からすると、「現在のところ」モバイル(スマホ)端末はAndroidの480、タブレットはiPad Proの1024が最大値となってますね。ただし1024というサイズはもはやユーザーが幅調整したPCブラウザの横幅を超えてる可能性もあるので、このサイズをタブレットの範疇に入れるかどうかは悩ましいところです。

中の人は現在のところ、500pxでモバイル(スマホ)、768pxでタブレット、それ以上のサイズはPCだと想定し各種設定(メディアクエリ値)することが多いです。
※ただし、クライアントは神様なのでクラ様が最新のiPad Proで閲覧してる場合なら1024でタブレットブレークポイントする場合もあるます(笑)