css - 纵向模式下的整页背景

Question

我正在使用这段代码让背景填满整个电话页面:

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"/>

请指教。

Answer 1

在设备方向方面，使用 100% 100%; 而不是 cover 是更可靠的选择，

在 fiddle 中查看演示 demo

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%;
}

此外，在您的 html 中使用 height: 100%; 以获得更好的兼容性!