记录移动端开发安全区域适配问题

随着移动设备屏幕多样化的发展，特别是刘海屏、凹槽屏和全面屏的普及，移动端应用的界面适配成为了一个挑战。其中一个关键的问题是如何处理不同设备的安全区域，以确保应用内容不被遮挡或者不合理显示。

安全区域的出现主要是因为现代手机屏幕上常见的各种传感器（如前置摄像头、扬声器等）和屏幕凹槽（如刘海或水滴屏）的存在，这些元素需要空间而不能被应用内容覆盖。

1. 用户体验优化：合理的安全区域适配可以确保应用内容不会被刘海、凹槽或屏幕边缘遮挡，提升用户的整体体验。
2. 界面美观性：适配安全区域可以使应用界面在各种设备上呈现一致的外观，不会因设备差异导致视觉上的不协调。
3. 遵循设计规范：现代设计规范（如 iOS 的 Human Interface Guidelines 和 Android 的 Material Design）建议开发者在设计和开发时考虑安全区域，以确保应用在各种设备上保持一致性和可预测性。

如何适配移动端安全区域？

使用安全区域 API：现代浏览器和移动操作系统通常提供了相关的 API 或 CSS 变量来访问设备的安全区域信息。例如，使用 constant() 和 env() 函数来获取安全区域的尺寸，而 Android 也有类似的实现。通过这些 API，开发者可以根据设备的安全区域尺寸动态调整布局和样式。

constant() 在 iOS11.2 之后就不能使用的，向后兼容，constant() 和 env()都需要，并且顺序不能改变。

.content {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持 env() 的浏览器，浏览器将会忽略它。

<meta name="viewport" content="width=device-width, viewport-fit=cover">

在某些 Android 设备上，safe-area-inset-top 可能会被正确识别，但其值却为 0。使用 CSS 变量和环境变量备用方案：

在处理 `safe-area-inset-top` 时，可以先尝试使用 CSS 变量和环境变量的组合来实现一个备用方案。例如，结合使用 `constant()` 函数和 `env()` 函数，函数获取 safe-area-inset-top，如果为 0，则使用备用值 0：
.element {
  padding-top: constant(safe-area-inset-top, 0px); 
  padding-top: env(safe-area-inset-top, 0px); 
  padding-top: max(constant(safe-area-inset-top, 0px), env(safe-area-inset-top, 0px)); 
}

借助 js 来实现：向页面中插入一个看不见的 div，将 div 的高度设置为安全距离的高度，然后再通过 js 获取其高度，若高度为 0，则说明没有生效。

let status = 0; // 0:还没数据，-1:不支持，1:支持
const supportSafeArea = () =>{
    if (status !== 0) {
        // 缓存数据，只向 body 插入一次 dom
        return status === 1;
    }
    const div = document.createElement('div');
    const id = 'check-safe-area';
    const styles = [
        'position: fixed',
        'z-index: -1',
        'height: constant(safe-area-inset-top)',
        'height: env(safe-area-inset-top)',
    ];
    div.style.cssText = styles.join(';');
    div.id = id;
    document.body.appendChild(div);
    const areaDiv = document.getElementById(id);
    if (areaDiv) {
        // 该 div 的高度是否为 0
        status = areaDiv.offsetHeight != 0 ? 1 : -1; 
        areaDiv.parentNode?.removeChild(areaDiv);
    }
    return status === 1;
}

开发过程中，务必使用真实设备或者模拟器进行测试，检查安全区域适配的效果。特别是针对不同型号的手机和操作系统版本进行测试，以确保适配的普适性和稳定性。