页面机型适配

排版和适配规范之外，白皮书还有一条容易被忽略的要求：页面要做好不同手机型号的适配，不能因为机型差异影响用户正常浏览使用。

规范要求

所有开发者应对资源页面做好不同手机型号的适配效果，不影响用户的正常浏览使用。

其中有非常具体的一条：iOS 全面屏手机底部横线（Home Indicator）不可遮挡页面的具体功能和内容。

为什么关注底部横线

全面屏 iPhone 用底部小横线代替了实体 Home 键，这片区域会对页面产生两类干扰：

• 视觉遮挡：悬浮在底部的内容（如功能按钮、底部导航）可能与横线重叠；
• 误触：底部按钮过于贴近横线区域，用户上滑手势容易误触发按钮。

白皮书给出了正反对比案例：左图为小程序 iOS 端正确适配（内容避开底部横线区域），右图为错误适配（功能被横线遮挡）。

落地建议

1. 底部安全区留白：为底部悬浮按钮、固定导航预留安全区高度，避开 Home Indicator 区域。
2. 真机多机型回归：至少覆盖小屏（如 SE 类）、标准屏、大屏全面屏三档真机或模拟器，检查布局是否错位、文字是否截断。
3. 注意刘海屏与异形屏：顶部状态栏区域同样要做安全区处理，避免内容被刘海遮挡。

机型适配看似是「细节」，但百度把它写进白皮书，说明这类问题在真实用户中足够普遍。在主流安卓机型与 iOS 全面屏上各实测一遍，是上线前的规定动作。

小结

机型适配两件事：避开 iOS 底部横线（安全区留白）+ 多档真机回归。做好了，就堵住了白皮书「页面浏览规范」的最后一个漏洞。