html5 - 将iPhone X旋转到横向时，封面图像的左侧和下方会出现空白区域

今天发生了一个奇怪的问题。当测试一个简单的“即将到来”页面时，我在iPhoneX上的背景图像在旋转到横向时并没有填满整个视区。在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>

正如您在浏览器中看到的，它渲染得很好。在肖像画中，它渲染得很好。在风景里没那么多。请参见屏幕截图。

html5 - 将iPhone X旋转到横向时，封面图像的左侧和下方会出现空白区域-LMLPHP

更新：不能在iPhone7上复制。只有iPhone X。

最佳答案

我找到了解决方案，想贴出来，以防其他人遇到这个问题。
iPhoneX有着臭名昭著的缺口和本垒打。除非你明确告诉苹果，否则苹果不希望这些内容被这些项目覆盖。要获得所需的结果，只需在样式声明中添加以下内容，就可以删除空白。
CSS：

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

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

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

填充告诉iPhoneX添加必要的填充，这样实际内容就不会被凹口和主栏覆盖。
viewport fit=cover告诉浏览器在槽口和主栏下扩展viewport。
我希望这能帮助别人！

关于html5 - 将iPhone X旋转到横向时，封面图像的左侧和下方会出现空白区域，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50475114/