iphonex适配

# 背景

自iphoneX出来后，前端多了一个需要适配的场景，就是iphoneX的底部小黑条，对于底部的一些组件比如tabbar，吸底按钮等，会被小黑条遮挡，影响体验。

解决方式就是设置间距，避开小黑条，留给页面内容足够的安全区域。

# 解决

# 方案一：根据机型判断

这个在之前小程序中判断较多

export function isIphoneXClassFn() {
  let isIphoneX, isIphoneXS, isIphoneXR, isIphoneXS_MAX
  try {
    let model = wx.getSystemInfoSync().model
    if (model.indexOf('iPhone X') > -1) {
      isIphoneX = true
    }
    if (model.indexOf('iPhone XS') > -1) {
      isIphoneXS = true
    }
    if (model.indexOf('iPhone XR') > -1) {
      isIphoneXR = true
    }
    if (model.indexOf('iPhone XS Max') > -1) {
      isIphoneXS_MAX = true
    }
  } catch (err) {}
  return isIphoneX || isIphoneXS || isIphoneXR || isIphoneXS_MAX
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

如果是app中，也可以利用js-bridge来判断机型，比如

function isIphoneX() {
    return new Promise((resolve, reject) => {
      JSBridge.invoke(
        {
          name: 'getDeviceInfo',
          useUnifiedAPI: true
        },
        {}
      )
        .then(state => {
          const { data } = state
          const iphonexList = [
            'iPhone10,3',
            'iPhone10,6',
            'iPhone11,2',
            'iPhone11,8',
            'iPhone11,4',
            'iPhone11,6',
            'iPhone12,1',
            'iPhone12,3',
            'iPhone12,5'
          ]
          const { deviceModel } = data
          if (iphonexList.indexOf(deviceModel) > -1) {
            resolve(true)
          } else {
            resolve(false)
          }
        })
        .catch(state => {
          reject(false)
        })
    })
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

然后根据是否iphonex来决定是否设置padding-bottom:34px;。

# 方案二：开启安全区适配

在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值

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

1
2
3
4

设置padding-bottom

针对需要适配的元素，比如底部tabbar，设置padding-bottom

{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}

1
2
3
4

#css

上次更新: 2022/03/24, 09:36:58

← css scrollbar样式设置