uniapp针对安全区域env(safe-area-inset-*)兼容

底部安全区域（实列）

目前发现IOS手机的谷歌浏览器，下滑时会触发全屏模式，导致底部home键遮住下面的元素。在index.html中添加mate标签。

【uniapp】uniapp设置安全区域：

部分 IOS 机型，比如 Iphone X 的屏幕底部有一条“小黑线”区域，uniapp 项目中我们可以使用CSS的env(safe-area-inset-bottom) 语句来自适配 IOS 的底部安全区域高度，这个语句会返回该机型的底部安全区域高度（单位 px）。

uniapp底部安全距离（safeAreaInsets）的实际应用

uniapp 设置安全区域以及导航栏和胶囊对齐。

env(safe-area-inset-bottom)和env(safe-area-inset-top)是CSS中的变量，用于获取设备底部和顶部安全区域的大小。所谓的安全区域就是指在iPhone X及以上的设备中，为避免被屏幕的“刘海”和“Home Indicator”所遮挡或者覆盖的有效区域区域，以确保内容在安全区域内显示。

uniapp 开发H5中适配底部安全区域不生效的解决方法

背景 身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，zhuo's

项目要在底部(tabbar之上)做一个固定的按钮，在一般手机下，样式没问题。在iPhone xr和iphone11下，就出现位置不正确，问题是iphone多了一个安全区域问题 大概是这一块。也是算在整个page高度里的，如果不加这个高度，那么固定定位的位置就会比原先的低（所以说，项目还是要真机测试才准确，模拟器测不准）。 解决：https://ask.dcloud.net.cn/article/36494 解释个说明：var(–safe-area-inset-bottom) 安全区域的高度，直接带单位（px

* 关于使用constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 会返回底部安全区的高度 两个方法都写，会自动选择能够生效的来使用 可以使用calc方法来计算，根据实际情况灵活使用 */

苹果机型不支持使用1rpx dashed，虚线最少需要设置为2rpx，否则真机运行时线条会消失；

在uniapp中可通过内置api获取系统信息得到： 1.uni.getSystemInfo(OBJECT)

ios nav 安全距离

针对IOS机型，底部安全区域是系统动态计算的，所以我们也需要动态获取底部安全区域来适配。在 uniapp 的pages.json文件中，对需要适配的页面添加如下配置。是一个较新的属性，可以同时兼容新旧版本。两者都用于访问安全区域的底部边距。函数用于结合固定值和安全区域边距，确保底部有额外的100px的距离。是一个Webkit内核的私有属性，用于兼容旧版iOS，而。单位来确保底部安全距离不受屏幕尺寸变化的影响。一种常见的方法是使用。