将 iPhone X 旋转为横向时，白色 space 出现在封面图像的左侧和下方

Question

今天发生了一个奇怪的问题。在测试一个简单的 "coming soon" 页面时，我的 iPhone X 上的背景图像在旋转为横向时没有填满整个视口。在 Chrome 和 Safari 中测试。

产生问题的简化示例：

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

<!DOCTYPE HTML>

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 </head>

 <body>
  
 </body>

</html>

正如您在浏览器中看到的那样，它呈现得很好。在肖像中，它渲染得很好。在景观中没有那么多。查看屏幕截图。

更新：无法在 iPhone 7 上重现。只有 iPhone X.

Answer 1

我找到了解决方案并想 post 以防其他人遇到这个问题。

iPhone X 有臭名昭著的刘海和 home bar。 Apple 不希望内容被这些项目覆盖，除非你明确告诉它。要获得所需的结果，您只需将以下内容添加到您的样式声明中即可删除空格。

CSS:

html {
  // your css to create a cover image 
  padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}

并更新元标记以包含 viewport-fit=cover

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

padding 告诉 iPhone X 添加必要的 padding，这样实际内容就不会被 notch 和 home bar 覆盖。

viewport-fit=cover 告诉浏览器扩展视口 "under" 刘海和主页栏。

希望对大家有所帮助！

将 iPhone X 旋转为横向时，白色 space 出现在封面图像的左侧和下方

When rotating an iPhone X to landscape, white space appears to the left and below cover image

html

cover

responsive-design

responsive