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

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

请参阅此处的演示文稿 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%;
}

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

纵向模式下的整页背景

1 个答案: