评论

小程序判断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增加距离底部高度。

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

3 个评论

  • wang li
    wang li
    05-30

    安卓机呢

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

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

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

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

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

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

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