小程序进阶-env(safe-area-inset-bottom)的使用，小程序进阶，env(safe-area-inset-bottom)应用详解

摘要：本文将介绍小程序开发中进阶使用env(safe-area-inset-bottom)的技巧。该属性用于适应iOS系统的安全区域，确保内容不会显示在屏幕底部的安全区域之外。本文将详细解释如何使用env(safe-area-inset-bottom)来避免底部安全区域问题，提高用户体验。

简介

env(safe-area-inset-bottom) 和env(safe-area-inset-top) 是 CSS 中的变量，主要用于获取设备底部和顶部的安全区域大小，这些安全区域指的是在 iPhone X 及以后的设备中，为了避免内容被屏幕的和“Home Indicator”遮挡而设定的有效区域，这些变量通常与padding 或height 结合使用，以达到最佳效果。

应用

1、与 padding 的结合

使用padding-bottom: env(safe-area-inset-bottom); 可以确保内容不会延伸到安全区域之下，如果你想让安全区域再靠上 20px，可以结合calc 使用：padding-bottom: calc(20px + env(safe-area-inset-bottom));。

2、与 height 的结合

你可以使用height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); 来设定元素的高度，这里的144px 是 iPhone X 的刘海高度，但请注意，其他设备的刘海或圆角区域可能有所不同。

3、机型兼容

某些设备可能无法识别env(safe-area-inset-bottom) 和env(safe-area-inset-top) 这两个变量，为了确保兼容性，可以采用以下写法：

// 兼容普通机型，不识别变量的机型：
height: calc(100vh - 144px);
// 兼容苹果手机等可以识别变量的设备：
height: calc(100vh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

如果设备能识别这两个变量，那么第二句 CSS 会覆盖第一句；如果不能识别，则只会执行第一句，确保兼容性，这是一种巧妙的写法，可以确保在不同设备上都能获得良好的显示效果。