iPhoneX安全性地区(Safe Area)底部小黑条在手机微信

日期:2021-02-22 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

近期写小程序流程时,遇到了 iPhoneX 底部小黑线与內容重合的难题,具体上是iPhoneX安全性地区的兼容难题,掌握清晰这个难题花了挺多時间的,也实操出了断果,禁不住来总结总结。

序言

在iPhone iPhoneX 、iPhone XR等机器设备上,能够看到物理学Home键被撤销,改成底部小黑条取代home键作用。手机微信小程序流程和 h5 网页页面必须对于这类状况开展兼容,不然将会会遇究竟部按钮或选项卡栏与底部黑线重合的状况,以下图。

1. 安全性地区是甚么意思?

要想处理內容与小黑线重合的难题,大家必须先掌握清晰iPhone针对安全性地区的界定。

安全性地区

安全性地区指的是1个可视性对话框范畴,处在安全性地区的內容不会受到圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的危害。

看看iPhone官方给的这2张图就搞清楚了,正中间蓝色地区即为安全性地区。也便是说,兼容安全性地区也便是让小程序流程或H5的內容显示信息在蓝色地区一部分。

另外安全性地区是在IOS11以后而且是iPhoneX及以上机型才有的,因此必须兼容的是这1类机型(以便便捷,下文中统称这类必须兼容的机型为iPhoneX),更老的机型则不必须考虑到兼容难题。

2. 在手机微信小程序流程上兼容安全性地区

3种计划方案:

  • 应用已知底部小黑条高宽比34px/68rpx来兼容(不强烈推荐)
  • 应用手机微信官方API,getSystemInfo()中的safeArea目标开展兼容(强烈推荐)
  • 应用iPhone官方推出的css涵数env()、constant()兼容(强烈推荐)涵数env()、constant()兼容(强烈推荐)的css涵数env()、constant()兼容(强烈推荐)

计划方案1:应用已知底部小黑条高宽比34px/68rpx来兼容(不强烈推荐)

这是较为老的方式,跟计划方案2、3比早已不强烈推荐了,大伙儿能够掌握掌握,心急能够立即看计划方案2和3。

从在网上掌握到,iPhone底部的小黑条(Home Indicator)高宽比是34px,具体我也在真机确定了是34px,因此能够依据该值,设定底部按钮或选项卡的margin-bottom、padding-bottom、height等,或加上1个div来占位小黑条的部位。

这样做要有1个前提条件,必须分辨当今机型是必须兼容安全性地区的机型。

难题:怎样分辨当今机型是必须兼容安全性地区

2种计划方案:

  • 应用wx.getSystemInfoSync()model特性分辨
  • 应用wx.getSystemInfoSync()中的screenHeightsafeArea目标的bottom特性分辨

方式1:应用wx.getSystemInfoSync()model特性分辨

已知市面上上已有的带安全性地区的iPhone机器设备包含iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max,因此能够立即从getSystemInfoSync()方式中拿到model特性开展分辨。iPhone系列手机微信还未兼容手机上的model回到值为unknown(iphone),还可以提早做兼容。

let IPHONE_X = /iphone x/i
let IPHONE_X_11 = /iphone 11/i
let IPHONE_UNKNOWN = /unknown\(iphone\)/i

//方式1:应用model分辨是不是是IPhoneX及别的包括安全性地区的机型手机上
const isIPhoneX = () => {
  let model = wx.getSystemInfoSync().model
  return (model.search(IPHONE_X) > ⑴ || model.search(IPHONE_X_11) > ⑴ ||
    model.search(IPHONE_UNKNOWN) > ⑴)
}

//还可以应用正则表达式表述式分辨
const isIPhoneXRegex = () => {
  let model = wx.getSystemInfoSync().model
  return (/iphone\sx/i.test(model)
    || (/iphone/i.test(model) && /unknown/.test(model))
    || /iphone\s11/i.test(model)) 
}

方式2:应用wx.getSystemInfoSync()中的screenHeightsafeArea目标的bottom特性分辨

这里应用screenHeight而并不是windowHeight,由于bottom是以显示屏左上角为原点刚开始测算的,因此必须的是显示屏高宽比,比照screenHeightbottom,假如相同则表明不必须兼容,不相同则必须兼容。

留意:假如应用手机微信开发设计者专用工具中的仿真模拟器,screenHeight和bottom自始至终是相同的,必须用真机来检测。

//方式2:应用wx.getSystemInfoSync()中的screenHeight和safeArea的bottom分辨
const isIPhoneX = () => {
  let screenHeight = wx.getSystemInfoSync().screenHeight
  let bottom = wx.getSystemInfoSync().safeArea.bottom
  return screenHeight !== bottom
}

处理了怎样分辨机器设备是iPhoneX的难题,便可以写编码了。

<view class="bottom-button {{isIpX ? 'view-IPX' : ''}}">底部按钮</view>

计划方案2:应用手机微信官方API,getSystemInfo()中的safeArea目标开展兼容(强烈推荐)

应用wx. getSystemInfo()中的safeArea目标获得底部小黑条的高宽比

step 1:应用上面讲的方式先分辨是不是是必须兼容的iPhone机型
step 2:假如是必须兼容的机型,应用safeArea中的bottom,获得安全性地区底部纵座标,随后应用screenHeight减去bottom就可以获得小黑条的高宽比。储存到localstorage里边,全局性都可以以应用。

计划方案3:应用iPhone官方推出兼容计划方案css涵数env()、constant()来兼容 (强烈推荐)

iPhone官方强烈推荐应用env()constant()来兼容,提议应用该计划方案,不必须管标值实际是是多少。这2个方式是甚么呢?

env()和constant(),是IOS11新增特点,Webkit的css涵数,用于设置安全性地区与界限的间距,有4个预订义自变量:

  • safe-area-inset-left:安全性地区间距左侧界限的间距
  • safe-area-inset-right:安全性地区间距右侧界限的间距
  • safe-area-inset-top:安全性地区间距顶部界限的间距
  • safe-area-inset-bottom :安全性间距底部界限的间距

由于总体目标是必须对底部小黑条做兼容,因此只必须关心safe-area-inset-bottom这个值。

而env()和constant()涵数有个必要的应用前提条件,当网页页面设定viewport-fit=cover的情况下才起效,依据手机微信小程序流程的主要表现和我在具体真机检测时这两个涵数起效,推断小程序流程里的viewport-fit默认设置是cover

有1点要留意,在IOS11.2系统软件之前,可使用constant()涵数,可是在IOS11.2系统软件之后,这个涵数就被废料了,被env()涵数取代了。官方原话以下:

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

因此大家在做显示屏兼容时,必须这样写:

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

留意:env()和constant()必须另外存在,并且次序不可以换。

3. 在H5上兼容安全性地区

在H5上兼容安全性地区就便捷多了,选用viewport+env+constant计划方案。

viewport-fit 默认设置有3个值:

  • contain:可视性对话框彻底包括网页页面內容(左图)
  • cover:网页页面內容彻底遮盖可视性对话框(右图)
  • auto:默认设置值,此值不危害原始合理布局主视图端口号,而且全部web网页页面全是可查询的。

contain和cover实际差别以下图:

而大家必须将viewport设定为cover,env和constant才可以起效。设定编码以下:

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

另外设定env和constant编码,一样env()和constant()必须另外存在,并且次序不可以换。

/* 能够根据提升padding-bottom来兼容 */
padding-bottom: constant(safe-area-inset-bottom); /*适配 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*适配 IOS>11.2*/

/* 能够根据margin-bottom来兼容 */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);

/* 或更改高宽比*/
height: calc(55px +  constant(safe-area-inset-bottom));
height: calc(55px +  env(safe-area-inset-bottom));

还可以在底部加上1个空白的div色调块来做兼容。

也有1种是应用 @supports 防护适配款式

可使用 @supports 来防护适配款式,当访问器适用bottom: constant(safe-area-inset-bottom)bottom: env(safe-area-inset-bottom)的情况下,bottom-button类就会新增margin-bottom的款式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { 
    .bottom-button {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom);  
    }
}

以上便是我对iPhoneX安全性地区(Safe Area)底部小黑条在手机微信小程序流程和H5兼容的总结。

假如对你有协助的话,点赞、评价、称赞全是对我的激励,也是适用我写下去的驱动力,感谢!

参照文章内容:

网页页面兼容 iPhoneX,便是这么简易

iPhone官方开发设计者文本文档有关显示屏兼容的表明

手机微信小程序流程吸底地区兼容iPhone X

手机微信小程序流程兼容 iPhone X 总结

到此这篇有关iPhoneX安全性地区(Safe Area)底部小黑条在手机微信小程序流程和H5的显示屏兼容的文章内容就详细介绍到这了,更多有关iPhoneX底部H5的显示屏兼容內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!