【uni-app】解决iPhone X “刘海屏”兼容性问题
这里可以使用uni.getSystemInfoSync()的mode属性获取手机型号,判断是否在iPhone X中运行,如果是,则重新设定padding-top的值即可。开发微信小程序时设置为自定义导航,在iPhone X这种有刘海屏的手机中预览会发现自定义导航与“刘海”之间的距离对比原生导航有些差异,用户体验不是很好。
·
开发微信小程序时设置为自定义导航,在iPhone X这种有刘海屏的手机中预览会发现自定义导航与“刘海”之间的距离对比原生导航有些差异,用户体验不是很好。
这里可以使用uni.getSystemInfoSync()的mode属性获取手机型号,判断是否在iPhone X中运行,如果是,则重新设定padding-top的值即可
见下面代码:
<template>
<view class="status-bar">
<!-- 这里是状态栏 -->
</view>
<view :class="{'nav-bar':true,hasBangs:doesHaveBangs}">
uni-app首页
</view>
</template>
<script>
export default{
name:"index",
data(){
return {
doesHaveBangs: false // 为true表示有刘海屏
}
},
onLoad(opts){
uni.getSystemInfo({
success: (res)=>{
var iphoneX= 'iPhone X';
// 判断手机型号是不是iphone x
if(res.model.indexOf(iphoneX) > -1){
this.doesHaveBangs= true;
}
// 后面可以考虑把有刘海屏的iphone型号都添加进来进行判断
}
})
},
...
}
</script>
<style scoped>
.hasBangs{
padding-top: 45rpx;
}
</style>
更多推荐
已为社区贡献14条内容
所有评论(0)