Safe Area Insets 在 Android 设备上的支持
safe-area-insets 主要是为了处理 iOS 设备上的"刘海屏"和其他不可见区域而引入的，但现代的 Android 设备也存在类似的问题，例如屏幕凹槽、摄像头打孔、底部导航栏等。幸运的是，safe-area-insets 也可以在 Android 设备上使用，因为现代浏览器普遍支持 env() 函数。
支持情况
- iOS 设备 ：
safe-area-insets在 iOS 设备上得到了很好的支持，尤其是在 Safari 浏览器中。 - Android 设备 ：现代浏览器（如 Chrome、Firefox、Edge）在 Android 设备上也支持
safe-area-insets，尽管支持程度可能因设备和浏览器版本而异。
示例
iPhone X 及其后续型号的"刘海"和底部导航栏。通过使用 constant() 和 env() 函数，可以确保内容不会被这些区域遮挡。
css
/* 使用 constant() 函数 */
margin-bottom: max(constant(safe-area-inset-bottom), 20px);
/* 使用 env() 函数 */
margin-bottom: max(env(safe-area-inset-bottom), 20px);
/*。底部导航栏安全距离 */详细解释
-
max(constant(safe-area-inset-bottom), 20px)：- 作用 ：取
constant(safe-area-inset-bottom)和20px中的较大值作为margin-bottom。 - 说明 ：如果设备底部的安全区内边距大于
20px，则使用安全区内边距；否则使用20px。
- 作用 ：取
-
max(env(safe-area-inset-bottom), 20px)：- 作用 ：取
env(safe-area-inset-bottom)和20px中的较大值作为margin-bottom。 - 说明 ：如果设备底部的安全区内边距大于
20px，则使用安全区内边距；否则使用20px。
- 作用 ：取
兼容性处理
为了确保在不同浏览器和不同版本的 iOS 上都能正确处理安全区内边距，通常会同时使用 constant() 和 env() 函数。这样可以确保在所有支持的浏览器中都能获得正确的效果。
解释
constant(safe-area-inset-bottom)：用于早期版本的 iOS（iOS 11 和 12），确保在这些版本的 Safari 上也能正确处理安全区内边距。env(safe-area-inset-bottom)：用于现代浏览器，包括最新版本的 Safari、Chrome、Firefox 和 Edge，确保在这些浏览器中也能正确处理安全区内边距。
除了底部，还提供了top left right 的安全距离
css
padding-top: max(constant(safe-area-inset-top), 20px);
padding-top: max(env(safe-area-inset-top), 20px);
/ * 获取顶部刘海屏安全距离 * /
css
padding-top: max(constant(safe-area-inset-left), 20px);
padding-top: max(env(safe-area-inset-left), 20px);
/ * 获取左侧安全距离 * /
padding-top: max(constant(safe-area-inset-right), 20px);
padding-top: max(env(safe-area-inset-right), 20px);
/ * 获取右侧安全距离 * /CSS 提供了 safe-area-inset-left 和 safe-area-inset-right 来获取设备左右的安全区内边距。这些属性用于确保内容不会被设备左右的不可见区域（如侧边按钮或边框）遮挡。