小程序对IPhone全面屏手机底部黑线的安全区域处理

自建博客文章链接：http://www.heblogs.cn/articleDetails/60f829a8fcae932a86eeaf33

前几天在对自己写的小程序项目进行优化时发现IPhone全面屏手机拥有底部黑线时候在app.js内定义的tabbar不会受到影响
但是在部分页面内自己手写的底部tabbar会被黑线挡住内容立马去查了下API。发现了其中几种解决方式话不多说贴代码
如果还有其他更优的方法欢迎留言或者私信

1、安全区域

首先先了解一下 IPhone手机的安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。市面上带安全区域的苹果设备包括以下这几款：iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max

2、首先，我们现在app.js的onLaunch生命周期中获取用户机型

 #原代码（代码有误 感谢网友指出错误）globalData: {  //定义全局变量Modelmes为nullModelmes: null，},onLaunch(options) {wx.getSystemInfo({//当小程序初始化完成时 获取用户的手机机型 并写出适配ipnone手机安全区域的的适配方案success: (res) => {wx.setStorageSync('Modelmes', res.model)//将机型存入到本地缓存 以免后期其他业务逻辑需要使用if (res.model === 'iPhone X' || 'iPhone XR' || 'iPhone XS Max' || 'iPhone 11' || 'iPhone 11 Pro' || 'iPhone 11 Pro Max');this.globalData.Modelmes = true;elsethis.globalData.Modelmes = false;}})},

 #2020/01/19更正代码（感谢网友指出错误 判断字符串不能像以上一样判断）globalData: {  //定义全局变量Modelmes为null,model为市面安全区域苹果机型Modelmes: null，model:{'iPhone X', 'iPhone XR', 'iPhone XS Max', 'iPhone 11', 'iPhone 11 Pro', 'iPhone 11 Pro Max', 'iPhone 12', 'iPhone 12 Pro', 'iPhone 12 Pro Max'}},onLaunch(options) {const { model } = this.globalDatawx.getSystemInfo({ //当小程序初始化完成时 获取用户的手机机型success: (res) => {const hasMa = model.find(item => item === res.model )this.globalData.Modelmes = hasMa && hasMa.length > 0}})},

3、在我们需要对底部安全区域进行适配的页面的onLoad生命周期内获取全局变量 ‘Modelmes’ 并写入该页面内的局部变量

    var app = getApp();let { Modelmes } = app.globalData;this.setData({ Modelmes });

4、既然拿到了变量，已知安全区域高度为34px，此时我们就可以对页面进行改进了

  <view  style="margin-bottom:{{Modelmes?'68rpx':'0'}}">

2020/1/19更新

方法二：
screenHeight 为屏幕高度
bottom是以屏幕左上角为原点开始计算的，所以也是屏幕高度
对比screenHeight和safeArea.bottom，如果相等则说明不需要适配，不相等则需要适配

    wx.getSystemInfo({success: (res) => {console.log('当前用户机型及配置',res)const screenHeight = wx.getSystemInfoSync().screenHeightconst bottom = wx.getSystemInfoSync().safeArea.bottomif(screenHeight === bottom){this.globalData.isIphone=false}else{this.globalData.isIphone=true}}

方法三：

使用苹果官方推出适配方案css函数env()、constant()来适配
若全局需要适配的话，可以直接在app.wxss里给相应的部分添加以下代码：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/**

小程序对IPhone全面屏手机底部黑线的安全区域处理相关推荐

Javascript判断是否iphone全面屏手机
Javascript判断是否iphone全面屏手机: function testUA (str) {return navigator.userAgent.indexOf(str) > -1 } ...
全面屏手机时代，指纹识别究竟该何去何从？
2016年11月,小米在发布第一代MIX手机时,提出了"正面全是屏幕"的"全面屏"概念,来描述手机正面超高的屏占比.后来,全面屏这个词渐渐被手机行业的从业人员及 ...
html页面全面屏手机,/* js 判断手机是否全面屏 */
/**判断屏幕大小 */ function judgeBigScreen() { //,这里根据返回值 true 或false ,返回true的话则为全面屏 let result = false; ...
android小米全面屏屏幕高度,小米众筹一款新的全面屏手机，小尺寸屏幕仅为5.05英寸，内置小爱同学玩转丰富...
小米众筹一款新的全面屏手机,小尺寸屏幕仅为5.05英寸,内置小爱同学玩转丰富 2019-07-30 03:09:10 34点赞 23收藏 48评论智能手机在大屏尺寸路上越走越远,各大手机厂商在全面屏 ...
安卓隐藏摄像_【快讯：诺基亚发布三款安卓机；全面屏手机的最终形态，目标是去掉摄像头；iPhone 打电话不息屏或挂断电话后不亮屏是什么问题？】...
资讯一 [诺基亚发布三款安卓新机:带来了可拆后盖设计] 2月25日,诺基亚在MWC 2019正式召开发布会,发布了诺基亚4.2.诺基亚3.2.诺基亚1 Plus三款全新安卓机型. 其中诺基亚4.2是三 ...
屏幕小于6英寸的手机_2019小屏手机有哪些 8款6英寸以下小屏全面屏手机推荐
春节将近,最近家里明显变得忙了起来,今天由于事情比较多,晚上抽空为大家带来一篇之前有小伙伴比较想看的文章.前不久,有粉丝朋友留言表示,麻烦做一期6英寸以下手机的汇总,满足一下小屏用户的需要,谢谢!对于 ...
小程序怎么判断是否是全面屏手机？
直接上代码 1.创建一个全局的状态 module.exports = {isAllScreen:false, //是否是全面屏手机 }; 2.在app入口文件 // 使用wx.getSystemInf ...
uniapp全面屏手机设置底部安全区颜色
这个问题是两个月前碰到的,那时项目比较急,没怎么细致处理.就修改了一下背景颜色,来弥补底部白色的色差冲突! 这个情况是在全面屏手机下产生的,在这之前先要有个概念,叫安全区!上张图大家就能大致就能知道是 ...
html手机全面屏的适配,css实现适配iphone全面屏代码
一.media query方式 1 /*iPhone X 适配*/ 2 3 @media only screen and (device-width: 375px) and (device-heigh ...

小程序对IPhone全面屏手机底部黑线的安全区域处理

2020/1/19更新

小程序对IPhone全面屏手机底部黑线的安全区域处理相关推荐

最新文章

热门文章