今天发生了一个奇怪的问题。在测试一个简单的“即将推出”页面时，我的 iPhone X 上的背景图像在旋转为横向时没有填满整个视口(viewport)。在 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 上重现。
最佳答案
我找到了解决方案并想发布它以防其他人遇到这个问题。
iPhone X 有臭名昭著的缺口和主页栏。 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 添加必要的填充，这样实际内容就不会被 notch 和 home bar 覆盖。
viewport-fit=cover 告诉浏览器在刘海和主页栏“下方”扩展视口(viewport)。
我希望这对某人有帮助!
关于html - 将 iPhone X 旋转为横向时，封面图像左侧和下方会出现空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50475114/