H5适配iphoneX底部留白问题

老白 3个月前 219浏览 0评论

1、首先,给viewport meta 标签添加一个扩展viewport-fit,用于设置网页在手机的可视窗口的布局方式
  属性值有:contain 视窗包含网页
       cover  网页覆盖视窗
       auto 默认值,同contain效果
注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤

2、env() 和 constant()

ios新增特性函数,用于设置安全区域与边界的距离,有四个值

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  • safe-area-inset-left:安全区域距离左边边界距离

  • safe-area-inset-right:安全区域距离右边边界距离

  • safe-area-inset-top:安全区域距离顶部边界距离

  • safe-area-inset-bottom:安全区域距离底部边界距离
    底部兼容只需设置bottom边距即可


  • 注意:env() 跟 constant() 需要同时存在,而且顺序不能换。


发表评论