iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个
background-color
就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕。`<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">`
然后就由你来决定被安全区域制约的重叠区了。有一些新的 CSS 可以助你一臂之力。Stephen Radford 文档:
为了处理这些需求,iOS 11 的 Safari 引入了一些 constant 来处理
viewport-fit=cover
属性。
safe-area-inset-top
safe-area-inset-right
safe-area-inset-left
safe-area-inset-bottom
这些值可以应用到
margin
、padding
上,也可以应用到绝对定位的top
或left
上。在网页的 container 上添加如下代码:
`padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);`