[译] iPhone X的“头帘儿”与CSS

苹果的iPhone X是全屏幕手机，但是为了给相机和其他组件腾出空间，iphone x有一个缺口。结果导致屏幕设计处于一个尴尬的局面，例如将网站限制在安全区域内，边缘为白色条纹。虽然删除它不是一个很有技巧的事，在body上加一个background-color就可以做到。或者扩展网站的整个区域，可以在meta viewport中添加viewport-fit = cover。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Image 1.png

然后你需要了解常由安全区处理的重叠问题。有一些新的CSS属性可以帮助你。请看斯蒂芬·拉德福文档（http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/）：

在iOS 11的Safari版本上，使用viewport-fit = cover的时候，为了处理任何可能的调整，需要用到如下常量。

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

这可以添加到外边距（margin），内填充（padding）或绝对位置的值（absolute），如top或这left。

我将以下内容添加到网站上的主容器中

padding: constant(safe-area-inset-top)
constant(safe-area-inset-right) 
constant(safe-area-inset-bottom)
constant(safe-area-inset-left);

如果在iphone x的缺口屏幕中，安全区域和固定位置又会有另一个非常尴尬的情况。在Darryl Pogue的报告中（https://ayogo.com/blog/ios11-viewport/）:

iOS 11与早期版本不同之处在于Webview content现在遵守安全区域。这意味着如果你有一个标题栏，它是一个固定位置元素，它的顶部为0（top：0），它最初将会渲染在屏幕顶部20px以下：对齐到状态栏的底部。当您向下滚动时，它就会向上移动到状态栏的后面。当你向上滚动时，它将再次回到状态栏的下方（留下一个尴尬的间距，内容在20px的间距中显示）。 你可以在下面的图中看到这有多糟糕：

GIF.gif

幸运的是，只需要一些简单的修改，可以将viewport-fit=cover添加到meta viewport标签中来修复它。 如果你要覆盖这个视口，那么你可能需要一点点聪明才能避免隐藏的内容！

GIF2.gif