iphoneX底部黑条问题解决，使用css @supports

第一步：设置网页在可视窗口的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

1	<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：页面主体内容限定在安全区域内
env() 和 constant()ios11新增特性

● safe-area-inset-left：安全区域距离左边边界距离
● safe-area-inset-right：安全区域距离右边边界距离
● safe-area-inset-top：安全区域距离顶部边界距离
● safe-area-inset-bottom：安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

@supports 按照浏览器是否支持一个或多个特定的 CSS 特性应用一组样式声明;

如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式

@supports (bottom: env(safe-area-inset-bottom)) {    // @supports 判断浏览器是否支持 bottom: env(safe-area-inset-bottom） 支持的话执行下面的样式 safe-area-inset-bottom: iphone安全区域距离底部边界距离
  body::after{  //例：如果同意上面条件的话就是iPhoneX，就把body下面插入一个after高度正好在，小黑条下面
　　content:'',
　　display:block,
　　height:constant(safe-area-inset-buttom),  //高度等于小黑条的高度
   background-color:white,
 }
}

 

感谢您的阅读，本文由 凹凸实验室 版权所有。如若转载，请注明出处：凹凸实验室（https://aotu.io/notes/2017/11/27/iphonex/）