# 安全区适配
对于某些页面(需要点赞分享交互的、评论框等)最好是适配一下底部的评论框，要空出底部安全区位置。增加用户体验 之前一直用的方法是
let iphonex = false;
let models = ['iphonex', 'iphonexr', 'iphonexsmax', 'iphone11', 'iphone11pro', 'iphone11promax','iPhone 12/13 (Pro)','iPhone 12/13 Pro Max']
const model = res.model.replace(/\s/g, "").toLowerCase()
console.log("iphonex",res)
if (models.includes(model)) {
iphonex = true;
}
console.log("iphonex",iphonex)
return iphonex;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
最近发现这个方法莫名不好用了，模拟器和真机在个别机型上都有问题，而且iphone14出来以后还要修改该方法，于是修改为以下方法
export function isPhoneX() {
const res = uni.getSystemInfoSync();
if (res.safeArea.top > 20 && res.model.includes("iPhone")) {
// console.log("true",res)
return true;
}
// console.log("false",res)
return false;
};
//这个34是px 注意一下
export function safeH(){
if(isPhoneX())
return 34
return 0
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
TIP
也可以使用IOS新增的 env() 和 constant() 特性即可解决，不需要自己动态计算高度，从CSS层面解决这个问题：
<text class="bottom">视频通话</text>
.bottom{
padding-bottom:constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
padding-bottom:env(safe-area-inset-bottom);/* 兼容 iOS >= 11.2 */
}
1
2
3
4
5
2
3
4
5
- 而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover 可以直接使用 H5设置如下
<meta name="viewport" content = "width=device-width,viewport-fit=cover">
1