将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有一个臭名昭著的缺口和主页栏.除非您明确告知，否则苹果不希望这些项目涵盖内容.为了获得理想的结果，您可以通过在样式声明中添加以下内容来删除空格.
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.
}
并更新了meta标签，使其包含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屋！
