评论

小程序判断iphonex及以上机型

小程序判断iphonex及以上机型

在app.js 的 onLaunch 函数内调用 wx.getSystemInfo, 获得手机型号 res.model,然后通过一下代码判断:

wx.getSystemInfo({
      success: res => {
         if (res.model.indexOf('iPhone X') > -1) { //iphonex,xr,xs
         
         }
      },
      fail(err) {
        console.error(err);
      }
    })

这么写以后再增加机型还要维护

现在小程序getSystemInfo方法会返回safeArea对象,其中top字段可以作为我们判断的依据。x及以上机型的异形屏top为44,非异形屏为20。

所以可以使用这样来判断就不需要再维护了。

wx.getSystemInfo({
      success: res => {
        if (res.safeArea.top > 20) { //x及以上的异形屏top为44,非异形屏为20
			// 可以将结果存到globalData:
        }
      },
      fail(err) {
        console.error(err);
      }
    })

很多人会问这有什么用处呢,最常用的一个就是自定义tabBar的时候,x及以上机型都会在底部出现横线,这样会遮挡tabBar,所以可以通过判断来给tabBar增加距离底部高度。

最后一次编辑于  2020-05-27  
点赞 2
收藏
评论

3 个评论

  • admin
    admin
    2020-05-30

    安卓机呢

    2020-05-30
    赞同 2
    回复
  • 慢慢。
    慢慢。
    2020-05-27

    非刘海系列,屏幕高度小于 812

    只是开发工具判断不对(platform不是iOS),真机正常。

    platform.toUpperCase() === 'IOS' && screenHeight >= 812

    2020-05-27
    赞同
    回复
  • Peter👊
    Peter👊
    2020-05-27

    官方有专门的样式写这个==>padding-bottom: env(safe-area-inset-bottom)

    2020-05-27
    赞同
    回复 5
    • 答题小程序
      答题小程序
      2020-05-27
      这玩意模拟器或者部分机型有bug,一年了还没修复,还是自己判断吧。
      2020-05-27
      回复
    • Peter👊
      Peter👊
      2020-05-27回复答题小程序
      模拟器是会有bug,部分机型有哪一些?
      2020-05-27
      回复
    • 杨泉
      杨泉
      2020-05-28回复Peter👊
      相当多的android手机
      2020-05-28
      回复
    • Peter👊
      Peter👊
      2020-05-28回复杨泉
      安卓机下面有横条吗?
      2020-05-28
      回复
    • 🌅
      🌅
      2021-05-21回复Peter👊
      部分机型有
      2021-05-21
      回复
登录 后发表内容