将iPhone X旋转到横向时,封面图像的左侧和下方会出现空白区域
Tim*_*rom 5 html5 cover responsive-design responsive
今天发生了一个奇怪的问题.在测试一个简单的"即将推出"页面时,我的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.
Tim*_*rom 13
我找到了解决方案,并希望发布它以防其他人有这个问题.
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.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
填充告诉iPhone X添加必要的填充,因此实际内容不会被缺口和主页栏覆盖.
viewport-fit = cover告诉浏览器将视口扩展到缺口和主页栏下面.
我希望这可以帮助别人!
- 你让我省去了很多痛苦的寻找。谢谢 ：） (3认同)