1、App：在manifest.json源码视图中找到app-plus，添加safearea配置
"safearea" : {
"background" : "#FFFFFF", // 安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom" : {
// 底部安全区域配置
"offset" : "auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"
},
"left" : {
// 左侧安全区域配置（横屏显示时有效）
"offset" : "auto"
},
"right" : {
// 右侧安全区域配置（横屏显示时有效）
"offset" : "auto"
}
}
2、给page设置CSS文章来源：https://www.toymoban.com/news/detail-513143.html
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
3、找到template.h5.html文件，给meta添加viewport-fit=cover文章来源地址https://www.toymoban.com/news/detail-513143.html
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover">
到了这里，关于uniapp中ios底部安全区域问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
