[分享] 移动端适配iPhoneX方案
2018-02-28 本文已影响0人
是ADI呀
对页面进行iPhoneX适配处理教程
-
在viewport 中添加 viewport-fit=cover 属性
<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover"> -
安全区设置
iOS 11中包含了一个新的CSS函数 env()，以及一组四个预定义的常量：safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom
body {
padding-bottom: env(safe-area-inset-bottom);
}
image
一般我们只希望 iPhoneX 适配样式，可以配合 @supports 进行css条件判断使用样式：
@supports (bottom: constant(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
}
}
