我正在使用此代码使背景填充整个电话页面：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
在Ripple Emulator中，它在两个方向（纵向和横向）上都可以正常工作。当我在真实手机上运行该问题时，就会出现问题。它仅适用于景观。在纵向模式下，大部分页面为白色。
这是为什么？它是否与以下内容有关：
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"/>
请指教。
在确定设备方向时cover，使用而不是，100% 100%;是更可靠的选择，
html {
background: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-FZuItoVKah_RGHbFqQvwmvDIDuH1m7D1EaogdgaolNs1BQK0) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
此外，请使用height: 100%;以html获得更好的兼容性！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句