有这么好的理由吗?Lame问题,但我只是想知道是否有原因.
今天发生了一个奇怪的问题.在测试一个简单的"即将推出"页面时,我的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;
}Run Code Online (Sandbox Code Playgroud)
<!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>Run Code Online (Sandbox Code Playgroud)
正如您在浏览器中看到的那样,渲染效果很好.在肖像中,它渲染得很好.在景观中没那么多.查看截图.
更新:无法在iPhone 7上重现这一点.只是iPhone X.