iPhoneX 底部黑线布局适配

在页面的meta标签中添加 viewport-fit=cover 属性

  • viewport-fit=cover 页面内容填充整个屏幕


在css样式中 添加样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    footer{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

注:

  • @supports是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式。
  • env()和constant(),是IOS11新增特性,用于设定安全区域与边界的距离,有4个预定义变量:
  • safe-area-inset-top:安全区域距离顶部边界的距离 。 //为导航栏+状态栏的高度 88px
  • safe-area-inset-bottom:安全区域距离底部边界的距离。 //如果未竖屏时为0
  • safe-area-inset-left:安全区域距离左边边界的距离。 //如果未竖屏时为0
  • safe-area-inset-right:安全区域距离右边边界的距离。 //为底下圆弧的高度 34px
  • env() 和 constant() 只有设置 viewport-fit=cover 的时候才生效。
  • 在实际使用中,可以把这些值添加到margin或padding中,可以添加四个项,也可以只添加你所需要的。比如顶部或左侧。
4fdc2e079dec8f5040b1b18eaa1627de.png

你可能感兴趣的:(iPhoneX 底部黑线布局适配)