在换机或做网页适配时，手机全屏尺寸总是绕不开的话题。到底多大才算“全屏”？为什么同一英寸数，实际可视面积却天差地别？下面用问答+拆解的方式，把常见疑惑一次说透。

一、为什么官方标注的英寸数≠真实可视面积？

官方给出的“6.7英寸”指的是屏幕对角线长度，但屏幕比例、圆角切割、摄像头开孔都会吃掉一部分显示区域。

• 20:9比例比19.5:9更细长，同样6.7英寸，前者宽度更窄，高度更长。
• 部分机型采用双曲面，边缘弯折区在网页全屏时会被系统裁掉，导致有效像素减少。

因此，做前端适配时，建议用window.innerWidth/Height而非对角线英寸数。

二、主流手机全屏尺寸区间速查

把近两年市售机型按销量排序后，可归纳出三大黄金档：

1. 6.1-6.3英寸：iPhone 14/15、三星S23、小米13——单手可控，仍属“小屏”。
2. 6.5-6.7英寸：华为Mate60、OPPO Find X6、vivo X100——主流旗舰，兼顾影音与便携。
3. 6.8-7.0英寸：荣耀Magic5 Pro、三星S23 Ultra——接近小平板，适合重度阅读与分屏。

注意：折叠屏展开后可达7.6-8.0英寸，但外屏多在6.2英寸左右，需分别做两套断点。

三、网页设计师最该关心的三个像素值

问：拿到设计稿，到底按多少px做基准？

答：直接看CSS像素，而非物理像素。

结论：做响应式时，375-414px宽度已覆盖九成以上设备，垂直方向可自适应。

四、如何根据全屏尺寸选手机？

自问：手小、通勤党、游戏党、追剧党分别怎么选？

• 手小/通勤党：优先6.1英寸直屏，重量≤180g，口袋无压力。
• 游戏党：6.7英寸+直屏或微曲，散热面积大，误触少。
• 追剧党：6.8英寸+20:9比例，黑边更少，字幕不遮挡。

额外提示：同尺寸下，AMOLED比LCD更省电，但PWM调光敏感者需留意。

五、全屏尺寸对前端断点的真实影响

问：Bootstrap的576/768/992/1200断点还够用吗？

答：在手机全屏尺寸场景下，需要再细分：

@media (max-width: 360px) { /* 超小屏，如旧款iPhone SE */ }
@media (min-width: 361px) and (max-width: 390px) { /* 主流6.1英寸 */ }
@media (min-width: 391px) and (max-width: 428px) { /* 6.7英寸大屏 */ }
@media (min-width: 429px) { /* 折叠屏展开或小平板 */ }

这样可避免按钮过大或文字过小的尴尬。

六、常见误区一次澄清

误区1：英寸越大=续航越差

真相：屏幕功耗与分辨率、刷新率、亮度关系更大，6.7英寸1080P+LTPO反而比6.1英寸2K省电。

误区2：全面屏=无黑边

真相：系统导航条、安全区域、摄像头孔都会留下不可交互区域，设计时务必预留。

误区3：折叠屏展开后就是平板

真相：7.6英寸折叠屏比例接近正方形，与10英寸16:10平板差异巨大，UI需重新排版。

七、一句话选购公式

把需求量化：单手宽度≤72mm + 重量≤190g + 6.5英寸以内，就能在便携与视野间取得平衡。