スマホの画面サイズ一覧（横幅：width）
スマホやタブレットなどモバイル向けのウェブサイトを作る際、画面サイズ、主に横幅（width）はいくつくらいが主流なのか把握しておきたい。
スマホの画面サイズはmeta要素のviewportで「width=device-width,initial-scale=1.0」を指定してサイトを表示した場合、横の画面サイズは320pxくらいが最小で、現在は400px以上も多い。
これはスマホのスペック表などに記載されているフルHDなどの画面解像度（1920×1080）などの数値とは異なる。
スマホの主な機種における横の画面サイズ（width）を調べてみると、iPhoneは少し前までは393px、新機種では400px以上。 Google Pixelは412px。 最近は概ね400pxを少し超えるくらいのwidthが多い模様。
画面サイズの取得
ディスプレイの画面サイズは、JavaScriptのscreen.width（横幅）とscreen.height（縦幅）で取得できる。
以下表示例。
主な機種の画面サイズ一覧
Firefoxの開発ツール
ありがたいことにFirefoxの開発ツールには、いくつかの機種の画面サイズが予め登録されている。 下表に記す。 スマホやタブレットを縦に持った場合の横×縦のサイズ。 画面サイズ（インチ）と画面解像度は各機種のスペック表を参照した。 以下同様。
| 機種名 | screen.width screen.height |
画面サイズ (インチ) |
画面解像度 横×縦 |
| iPhone Air | 420×921 | 6.5 | 1,260×2,736 |
| iPhone 17 | 402×874 | 6.3 | 1,206×2,622 |
| iPhone 16 | 393×852 | 6.1 | 1,179×2,556 |
| iPhone 15 | 393×852 | 6.1 | 1,179×2,556 |
| iPhone 14 | 393×852 | 6.1 | 1,170×2,532 |
| iPhone 12/13、Pro | 390×844 | 6.1 | 1,170×2,532 |
| iPhone 12/13 mini | 375×812 | 5.4 | 1,080×2,340 |
| iPhone 12/13 Pro Max | 428×926 | 6.7 | 1,284×2,778 |
| iPhone X/XS | 375×812 | 5.8 | 1,125×2,436 |
| iPhone SE 2nd/3rd | 375×667 | 4.7 | 750×1,334 |
| iPad 10/11th iPadOS 18.6 | 820×1,180 | 10.9 | 1,640×2,360 |
| iPad mini 6th iPadOS 18.6 | 744×1,133 | 8.3 | 1,488×2,266 |
| iPad Pro 11inch(M4) iPadOS 18.6 | 834×1,210 | 11 | 1,668×2,420 |
| Google Pixel 9 | 412×915 | 6.3 | 1,080×2,424 |
| Google Pixel 8 | 412×915 | 6.2 | 1,080×2,400 |
| Google Pixel 5 | 393×851 | 6.0 | 1,080×2,340 |
Google Chromeのデベロッパーツール
Google Chromeのデベロッパーツールにもいくつかの機種が登録されているが古い機種が多くデータが更新されていない。
| 機種名 | screen.width screen.height |
画面サイズ (インチ) |
画面解像度 横×縦 |
| Google Pixel 7 | 412×915 | 6.3 | 1,080×2,400 |
私物
私が個人で所有していた主なスマホやタブレットの情報。
| 機種名 | screen.width screen.height |
画面サイズ (インチ) |
画面解像度 横×縦 |
| モトローラ moto g64 5G | 432×960 | 6.5 | 1,080×2,400 |
| ファーウェイ P30 lite | 360×771 | 6.15 | 1,080×2,312 |
| iPad mini 5th | 768×1,024 | 7.9 | 1,536×2,048 |
ユーザーエージェント
Googleのボット（Googlebot）などはJavaScriptを実行する場合、screen.width、screen.heightの値も取得できる。 ここでは主なユーザーエージェントとwidth×heightの値を記す。
GooglebotやLighthouse（Chromeのデベロッパーツールにある計測ツール）の値を見ると、スマホ（モバイル）に関してはGoogle Pixelと同じ412pxを基準にしているようだ。
Googlebot
- Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.7632.159 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
- 412×732
- Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.7632.159 Mobile Safari/537.36 (compatible; GoogleOther)
- 412×732
- Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.7632.159 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
- 1024×1024
- Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/145.0.7632.159 Safari/537.36
- 1024×1024
Lighthouse
- Mozilla/5.0 (Linux; Android 11; moto g power (2022)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Mobile Safari/537.36
- 412×823
- Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36
- 2560×1440
google-proxy
google-proxy-66-102-6-6.google.com などからアクセスしているボット。
- Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
- 360×640
- Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
- 1280×1024
