1. 使用已知底部小黑条高度34px/68rpx来适配
  2. 使用苹果官方推出的css函数env()、constant()适配
    1. safe-area-inset-left:安全区域距离左边边界的距离
    2. safe-area-inset-right:安全区域距离右边边界的距离
    3. safe-area-inset-top:安全区域距离顶部边界的距离
    4. safe-area-inset-bottom :安全距离底部边界的距离
    5. padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  3. 使用微信官方API,getWindowInfo()中的safeArea对象进行适配
Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐