【uni-app】解决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 xif(res.model.indexOf(iphoneX) > -1){this.doesHaveBangs= true;}// 后面可以考虑把有刘海屏的iphone型号都添加进来进行判断}})}，...}
</script><style scoped>.hasBangs{padding-top: 45rpx;}
</style>

【uni-app】解决iPhone X “刘海屏”兼容性问题相关推荐

iPhone的刘海屏和home键解决方案
iPhone开发常见问题及解决方法问题 1.APP放大缩小解决方法:我们可以根据需求引入上面的代码. 2.刘海屏问题注意 3.iPhone 11后底部home遮挡问题方法一: 方法二: 方法三 ...
iOS APP适配iPhone X全屏
要让APP在iPhone X上变成全面屏显示(占满整个屏幕),而不是上下有没用的黑条,其实很容易,只需要: 在LaunchImage 中添加一个和 iPhone X 相关的启动图片. 即一张尺寸:11 ...
iOS - iPhone手机刘海屏判断
2022.04.11 更新,修改获取 iPhone 状态栏.导航栏.TabBar高度等部分内容. 前言最近写毕业设计的时候,发现 iPhoneX 之后的刘海屏手机顶部状态栏高度和底部TabBar高度 ...
android小米刘海屏幕适配,Android、iPhone手机刘海屏适配判断
一.简介手机屏幕的正上方居中位置(下图黑色区域)会被挖掉一个孔,屏幕被挖掉的区域无法正常显示内容,这种类型的屏幕就是刘海屏,也有其他叫法:挖孔屏.凹凸屏等等二.Android刘海屏适配判断 1.判 ...
APP适配安卓手机刘海屏
如果你想允许全屏界面内容显示到刘海区域 ,只要在AndroidManifest.xml文件里配置如下代码即可:  <m ...
iphone X 刘海屏适配
iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对 iphonx 适配,下面就详细说说如何适配 iphonex 提供的 meta 头 < ...
uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案
前言场景:因为要做无 tabbar 页面,所以在配置文件中取消底部导航栏. 取消后,iPhone X(刘海屏) 底部就出现如下图所示白色安全区域问题: 这个问题,是因为 uni-app 默认会为 i ...
cordova应用兼容iOS11+和iPhoneX刘海屏
前言最近开发的cordova应用需要兼容 iOS 11+ ,以及 iPhone X 的刘海屏,查了一些资料,这里做下总结. 首先看下正常打包后的App界面,上下有明显的黑色区域,并没有占满整个屏幕. ...
iOS开发：判断iPhone是否是刘海屏iPhoneX、iPhoneXR、iPhoneXs、iPhoneXs Max等
保证能判断,呕心沥血,不行切JIJI 方法一 Objective-C // iPhoneX.iPhoneXR.iPhoneXs.iPhoneXs Max等 // 判断刘海屏,返回YES表示是刘海屏 - ...

【uni-app】解决iPhone X “刘海屏”兼容性问题

【uni-app】解决iPhone X “刘海屏”兼容性问题相关推荐

最新文章

热门文章