对页面进行iPhoneX适配处理教程
<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
safe-area-inset-left
, safe-area-inset-right
, safe-area-inset-top
和 safe-area-inset-bottom
123body { padding-bottom: env(safe-area-inset-bottom); } 一般我们只希望 iPhoneX 适配样式,可以配合 @supports 进行css条件判断使用样式:
12345 | @supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); } } |
---|