复制代码<view v-if="safeAreaInsetBottom" :style="[{ height: safeBottomHeight + 'px' }]"></view>
data() {
return {
placeholderHeight: 0,
safeBottomHeight: uni.getSystemInfoSync().safeAreaInsets.bottom
};
}, 
itmonkey
- 发布：2022-06-21 13:27
- 更新：2022-07-29 17:28
- 阅读：746
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window11
HBuilderX类型： 正式
HBuilderX版本号： 3.4.17
浏览器平台： 微信内置浏览器
浏览器版本： 无
项目创建方式： HBuilderX
示例代码：
操作步骤：
使用ios 真机，测试下safeAreaInsets.bottom，高度为0
使用ios 真机，测试下safeAreaInsets.bottom，高度为0
预期结果：
使用ios 真机，测试下safeAreaInsets.bottom，得到真实安全区域高度
使用ios 真机，测试下safeAreaInsets.bottom，得到真实安全区域高度
实际结果：
使用ios 真机，测试下safeAreaInsets.bottom，高度为0
使用ios 真机，测试下safeAreaInsets.bottom，高度为0
bug描述：
uni.getSystemInfoSync()，微信H5下，ios底部安全区域safeAreaInsets.bottom 为0，开发者工具有效，真机无效。
其他端正常，开发者工具正常，微信H5，ios真机不行
应该是bug，我试了下"plus.navigator.getSafeAreaInsets()"，拿到的数值里面deviceBottom正是之前能获取到的bottom
复制代码//异常
{
"bottom": 0,
"deviceBottom": 34,
"deviceLeft": 0,
"deviceRight": 0,
"deviceTop": 48,
"left": 0,
"right": 0,
"top": 48
}
复制代码
//正常时
{
"platform": "ios",
"safeArea": {
"left": 0,
"right": 414,
"top": 48,
"bottom": 862,
"width": 414,
"height": 814
},
"safeAreaInsets": {
"top": 48,
"right": 0,
"bottom": 34,//和上面的deviceBottom一致
"left": 0
},
"screenHeight": 896,
"screenWidth": 414,
}
itmonkey (作者)
vue3，没有基于哪个版本，uni.getSystemInfoSync().safeAreaInsets.bottom，这个api开发者工具，小程序等平台都没问题，在ios微信H5，参数为0，ios12
2022-06-23 11:13
DCloud_UNI_GSQ
回复 itmonkey: 是否配置了模板html（https://uniapp.dcloud.io/collocation/manifest.html#h5-template），分析是没有配置viewport-fit=cover
2022-06-23 11:23