将 iPhone X 旋转为横向时，封面图像的左侧和下方出现空白
Posted
技术标签:
【中文标题】将 iPhone X 旋转为横向时，封面图像的左侧和下方出现空白【英文标题】：When rotating an iPhone X to landscape, white space appears to the left and below cover image 【发布时间】：2018-11-01 15:51:29 【问题描述】：今天发生了一个奇怪的问题。在测试一个简单的“即将推出”页面时，我的 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。
【问题讨论】：
【参考方案1】：我找到了解决方案并想发布它以防其他人遇到此问题。
iPhone X 具有臭名昭著的刘海屏和 Home bar。 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 添加必要的内边距，以便实际内容不会被凹槽和主栏覆盖。
viewport-fit=cover 告诉浏览器将视口扩展“位于”凹槽和主栏“下方”。
我希望这对某人有帮助！
【讨论】：
您为我省去了很多痛苦的搜索。谢谢你:) 非常感谢。我登录帐户以支持您的回答 // 不是有效的 cmets，应替换为 /* */ cmets（编辑队列已满，否则我将编辑答案）。见***.com/questions/51843506/…以上是关于将 iPhone X 旋转为横向时，封面图像的左侧和下方出现空白的主要内容，如果未能解决你的问题，请参考以下文章