第一步:设置网页在可视窗口的布局方式
新增 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/)