目前手机的CSS视口宽度大约在360到440像素之间,平板在744到1032像素之间。紧凑型Android手机是360,iPhone在375到440之间,大屏Android手机在412及以上,iPad mini是744,11英寸和13英寸的iPad在820到1032之间。本文按设备列出数值,解释Android的数值为什么在不同来源之间不一致,最后给出需要测试的宽度清单。
在下方预览中选一台设备,输入网址,就能看到你的网站在该尺寸下的样子。
真正重要的宽度
不必测试每一个型号。下面这些宽度已经覆盖了实际的分布:
| CSS宽度 | 典型设备 | 为什么要测 |
|---|---|---|
| 320 | iPhone SE(第1代)、分屏模式下的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 | 竖屏大平板,横屏小笔记本 |
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的视口笔记列出分屏和侧拉视图的宽度为320到694像素,所以你的平板布局可能要在手机宽度下渲染。没有viewport元标签时,同一份笔记记录iPad会使用980像素的布局。
如何读取自己设备的真实尺寸
参考表只是起点。想知道你的设备报告的数值,打开浏览器控制台,或任何会显示该数值的页面,运行:
`${innerWidth} × ${innerHeight} @ ${devicePixelRatio}x`设置会改变结果:三星的屏幕缩放和显示大小、浏览器的文字缩放、地址栏是否收起,以及屏幕方向。什么是视口尺寸一文解释了高度为什么总在变。
应该测试哪些宽度
Android测360和412,iPhone测390和402,平板测744和834,再加上320作为极限情况,以及一台手机和一台平板的横屏。不要把这些数字当成断点:按设备划分的断点很快就会过时,响应式断点应当跟随你自己的布局在哪里出问题。这些尺寸用来检查,完整流程见如何测试响应式设计。
常见问题
设计移动端网站应该以什么屏幕尺寸为准?
从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。采用某个数值前,请先在你自己的设备上核对。