safe-area-inset-bottom

在现代移动设备中，特别是像iPhone X及其后续机型这样的全面屏手机，由于其特殊的屏幕设计（如“刘海”、圆角以及可能存在的底部指示器区域），传统的页面布局方式可能会遇到一些问题。为了确保内容不被屏幕边缘的遮挡物所覆盖，CSS引入了safe-area-inset系列属性，其中safe-area-inset-bottom用于定义屏幕底部安全区域的内边距。

一、了解safe-area-inset-bottom

safe-area-inset-bottom是一个CSS环境变量（environment variable），它返回一个长度值，表示在视口底部需要保留的额外空间，以确保内容不会被屏幕底部的任何遮挡物（如底部指示器）所覆盖。这个属性在iOS 11.3及更高版本的Safari浏览器中受到支持，并且随着Web标准的发展，其他浏览器也在逐步跟进。

二、使用safe-area-inset-bottom

1. 基本用法：

   要在CSS中使用safe-area-inset-bottom，你需要使用env()函数来引用它。例如，如果你想为一个固定在页面底部的元素（如一个导航栏）添加额外的底部内边距，你可以这样做：

   .navbar {
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       padding-bottom: env(safe-area-inset-bottom); /* 添加底部安全区域的内边距 */
       background-color: #fff; /* 背景颜色 */
       /* 其他样式 */
   }
   

   在这个例子中，.navbar元素将会有一个底部内边距，其大小等于屏幕底部安全区域的高度。

2. 兼容性处理：

   由于env()函数在iOS 11.2及更早版本的Safari中不受支持，而constant()函数（已弃用）在这些版本中可用，但为了保持向后兼容性，建议同时使用这两个函数，并给constant()提供一个回退值（虽然constant()现在已经被弃用，但一些旧设备可能仍然使用它）：

   .navbar {
       padding-bottom: env(safe-area-inset-bottom); /* 现代浏览器 */
       padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
       /* 注意：constant()现在已被弃用，但出于兼容性考虑，仍然保留在这里 */
   }
   

   然而，由于constant()的弃用，更现代的做法是只使用env()，并确保你的网站或应用针对的是支持env()的浏览器版本。

3. 与其他布局属性的结合：

   safe-area-inset-bottom可以与其他CSS布局属性（如position: fixed、flexbox、grid等）结合使用，以确保你的页面布局在各种设备上都能正确显示。

三、测试和调试

1. 在真实设备上测试：

   使用真实的移动设备（特别是全面屏设备）来测试你的页面布局。这可以确保你的safe-area-inset-bottom实现能够在各种情况下正确工作。

2. 使用开发者工具：

   如果你没有真实的设备可供测试，许多现代浏览器（如Chrome）都提供了移动设备模拟功能，你可以在其中查看你的页面在不同设备上的显示效果。然而，请注意，这些模拟功能可能无法完全准确地反映真实设备上的行为，特别是在处理像safe-area-inset-bottom这样的环境变量时。

3. 调试和修正：

   根据测试结果，你可能需要调整你的CSS代码，以确保底部内容在所有情况下都能正确显示。这可能需要修改内边距、调整布局或使用其他CSS技巧来解决问题。

四、注意事项

• safe-area-inset-bottom是一个环境变量，它依赖于浏览器的实现和支持。因此，在编写代码时，请确保你的目标浏览器版本支持这个属性。
• 在设计页面布局时，请考虑到用户可能会使用不同的设备和浏览器，并尽量确保你的页面在各种情况下都能提供良好的用户体验。
• 不要过度依赖safe-area-inset-bottom来创建页面布局，而是应该将它作为一种优化手段来使用，以确保在全面屏设备上获得更好的显示效果。

通过以上步骤，你应该能够在CSS中有效地使用safe-area-inset-bottom来优化你的页面布局，并确保它在各种移动设备上都能正确显示。

本文地址：https://www.tides.cn/p_css-iphonex-safe-area-bottom-inset