今天出现了一个奇怪的问题。在测试一个简单的“即将推出”页面时，我的 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 上。
我找到了解决方案并想将其发布，以防其他人遇到此问题。
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">
填充告诉 iPhone X 添加必要的填充，以便实际内容不会被凹口和主页栏覆盖。
The viewport-fit=cover告诉浏览器将视口扩展到凹口和主页栏“下方”。
我希望这可以帮助别人！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
