将 iPhone X 旋转到横向时，左侧和封面图像下方会出现空白 [英] When rotating an iPhone X to landscape, white space appears to the left and below cover image
问题描述
今天出现了一个奇怪的问题.在测试一个简单的即将推出"页面时，我的 iPhone X 上的背景图像在旋转到横向时没有填满整个视口.在 Chrome 和 Safari 中测试.
A weird problem occurred today. While testing a simple "coming soon" page my background image on my iPhone X is not filling the entire viewport when rotating to landscape. Tested in Chrome and 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>正如您在浏览器中看到的那样，它呈现得很好.在肖像中，它呈现得很好.在风景方面没有那么多.查看屏幕截图.
As you can see in the browser it renders fine. In portrait, it renders fine. In landscape not so much. See screenshots.
更新:无法在 iPhone 7 上重现这一点.只有 iPhone X.
UPDATE: Cannot reproduce this on an iPhone 7. Just the iPhone X.
推荐答案
我找到了解决方案并想发布它，以防其他人遇到此问题.
I found the solution and wanted to post it in case anyone else has this problem.
iPhone X 有臭名昭著的刘海和主页栏.除非您明确告诉 Apple，否则 Apple 不希望这些项目涵盖内容.要获得所需的结果，您只需将以下内容添加到样式声明中即可删除空格.
The iPhone X has the notorious notch and home bar. Apple doesn't want content to be covered by those items unless you explicitly tell it to. To achieve the desired result you can remove the whitespace by simply adding the following to your style declaration.
CSS:
html {
// your css to create a cover image
padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}
并更新了元标记以包含 viewport-fit=cover
And updated the meta tag to include viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
内边距告诉 iPhone X 添加必要的内边距，这样实际内容就不会被缺口和主页栏覆盖.
The padding tells iPhone X to add the necessary padding so the actual content is not covered by the notch and home bar.
viewport-fit=cover 告诉浏览器将视口扩展到缺口和主页栏下方".
The viewport-fit=cover tells the browser to extend the viewport "under" the notch and home bar.
我希望这对某人有所帮助！
I hope this helps someone!
这篇关于将 iPhone X 旋转到横向时，左侧和封面图像下方会出现空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
