H5移动端适配：解决iPhone刘海屏和Android挖孔屏的安全区问题（附代码示例）

H5移动端适配：解决iPhone刘海屏和Android挖孔屏的安全区问题（附代码示例）

作为一名长期奋战在一线的H5开发者，你是否曾遇到过这样的场景：精心设计的页面在测试同事的iPhone 14 Pro上预览时，顶部的导航栏按钮仿佛被“咬”掉了一块，用户根本点不到；或者在最新的Android挖孔屏手机上，页面内容与摄像头孔洞尴尬地重叠在一起。这并非设计失误，而是我们正处在一个屏幕形态急剧演变的时代。从最初的“齐刘海”到如今的“灵动岛”、“药丸屏”、“屏下摄像头”，移动设备的显示区域变得越来越不规则，这对我们前端开发者提出了新的挑战——如何确保我们的H5应用在任何屏幕上都能“安全”地展示和交互？今天，我们就来深入聊聊这个看似简单，实则暗藏玄机的“安全区”适配问题，并提供一套从原理到实战的完整解决方案。

1. 理解移动端安全区：不仅仅是“刘海”和“挖孔”

在深入代码之前，我们必须先搞清楚“安全区”究竟是什么。简单来说，安全区指的是屏幕上完全不受摄像头、传感器、圆角等硬件设计影响的、可以安全放置交互内容的矩形区域。对于传统的矩形屏幕，安全区就是整个可视区域。但对于现代全面屏设备，情况就复杂多了。

1.1 安全区的构成与挑战

安全区问题主要源于两个层面：硬件异形切割和软件交互区域。

• 硬件异形区域：这是最直观的部分，包括：

  • iPhone的刘海/灵动岛：位于屏幕顶部中央的凸起区域，用于容纳前置摄像头和传感器。
  • Android的挖孔/水滴屏：通常在屏幕左上角或顶部中央的圆形或椭圆形开孔。
  • 屏幕圆角：几乎所有全面屏手机的四个角都是圆角，直角内容在这里会被裁剪。

• 软件交互区域：这是操作系统为系统级交互保留的空间，例如：

  • iOS的主屏幕指示条：位于屏幕底部的一条横线，用于手势返回主屏幕。
  • Android的导航手势区域：屏幕底部用于手势导航的区域。

如果我们的H5页面布局无视这些区域，就会导致按钮被遮挡、文字显示不全、甚至手势冲突等糟糕的用户体验。下图直观展示了问题所在：

注意：安全区适配的核心目标，是让我们的核心交互内容和关键信息始终位于安全区内，同时可以灵活地利用非安全区域进行背景、装饰等非交互元素的展示，以实现真正的“全面屏”沉浸感。

1.2 关键CSS环境变量：env() 和 constant()

为了解决这个问题，W3C和各大浏览器厂商引入了CSS环境变量。其中最核心的就是 safe-area-inset-* 系列变量。

在CSS中使用它们时，需要同时考虑新旧浏览器的兼容性，因此通常会同时使用 env() 和 constant() 函数。constant() 是早期iOS Safari的实现，env() 是后来的标准写法。书写顺序上，constant() 在前，env() 在后，因为浏览器会忽略无法识别的属性值，这样可以实现向后兼容。

/* 标准的兼容性写法 */
padding-top: constant(safe-area-inset-top); /* 兼容旧版iOS Safari */
padding-top: env(safe-area-inset-top); /* 标准写法，新版浏览器支持 */

2. 第一步：配置视口（Viewport）的基石

所有安全区适配工作的前提，是正确设置视口（viewport）的 viewport-fit 属