iPhone X 配备一个覆盖整个手机的全面屏,顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景:网站被限制在一个“安全区域”,在两侧边缘会出现白条儿。移除这个白条儿也不难,给 body 设置一个
就可以搞定。或者,可以添加 viewport-fit=cover meta 标签,将整个网站扩展到整个屏幕。
- background-color
- ` < 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);`
刘海、安全区域和 fixed 定位还会造成其他尴尬的情景。Darryl Pogue 报告:
iOS 11 和早期版本的差异性在于 webview 内容遵循安全区域。也就是说,如果你在顶部设置一个 top 为 0 的 fixed 定位的 header,实际位置会出现屏幕顶部以下 20px 处,和状态栏底部是对齐的。当向下滚动的时候,会向上移动到状态栏的后面;当向上滚动时,会再次滑到状态栏的下方(网页内容会在那条尴尬的 20px 的缝隙中显示)。
可以在视频中查看这种情况是多么的糟糕:
可喜可贺的是,添加一个
标签就可以一键搞定。
- viewport-fit=cover
来源: http://www.webhek.com/post/the-notch-and-css.html