一个做光学仪器的客户发来截图：他们的官网在客户的iPhone上打开，顶部导航被挖了个洞——标志刚好顶在摄像头挖孔的位置，菜单按钮贴着屏幕边缘，看着像坏了一样。开发那边一口咬定代码没问题，浏览器里测试确实一切正常。这就是典型的安全区问题：屏幕边缘那一圈，不再属于网页随便用的地盘。
屏幕变了，规矩也变了
这几年的手机屏幕，顶上有刘海或挖孔，底部有手势条，四边还是圆角。网页铺满全屏时，这圈边缘区域可能挡住内容。平时浏览器自带留白，问题不明显；一旦网站做了沉浸式设计——顶栏颜色铺到屏幕顶端、吸底栏贴到屏幕底边，遮挡就来了。做响应式网站设计，遇到满屏设计就得把安全区算进去，留出那几十像素的缓冲，内容才不会撞墙。
三类页面要重点过
- 顶部铺色或大图首屏：状态栏文字和标志可能在刘海区打架，标题被挖孔正好切断；
- 吸底操作栏：底部的手势条会压住按钮下半截，点按变成误触手势，客户会以为网站坏了；
- 全屏弹层和图片浏览器：关闭按钮贴边，被圆角吃掉一半，点不中。
技术上解决起来不复杂：样式里有专门的安全区变量，几行代码就能让内容自动避开屏幕边缘，苹果安卓都支持。难的不是写代码，是知道要写——很多团队压根没把这条放进检查清单，浏览器模拟器也测不出来，只能真机现形。这也是为什么每家建站公司的测试清单，得随着新设备的形态年年更新。这就是为什么问题总在客户的手机上第一次被发现。
真机一测就现形
借一台近年出的iPhone或者安卓旗舰，打开网站看三处：顶部内容有没有被状态栏和刘海压住、底部按钮跟手势条有没有重叠、全屏看图时关闭按钮在不在圆角里。三处都干净，安全区就过关。改动通常半天工作量，属于花小钱防大尴尬的活。花小钱三个字是关键，安全区适配大概率是整个项目里最便宜的技术项之一。
建议验收新站时把这一条加进真机测试项，尤其是做了沉浸式头图和吸底栏的网站。改老站的话，优先处理吸底栏的底部留白，那是出事率最高的位置。比格网络的响应式网站设计自检清单里，安全区是近两年新加的固定项——屏幕的物理形态在变，交付标准也得跟着长，别让几行代码的疏漏挡在客户面前。这类问题修复虽快，发现却靠运气，唯一的解法是把真机检查变成例行动作。
