全屏背景不适用于移动设备

Question

在台式机上一切正常，但如果您在 ipad 或智能手机上检查它，背景将不起作用。客户向我要全屏图片；在桌面上还可以，但是在Ipad上，当你在纵向和横向之间切换时需要刷新页面，它看起来像“重复”。

我该如何解决？

Answer 1

试试这个；

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

Answer 2

需要js设置section height吗？您可以使用 CSS:

html,正文{height:100%; } 和 #wrapper { height:100%; }

我还注意到您为 body 和 #wrapper 设置了相同的背景，它看起来像是重复的，所以从这些元素之一中删除 bg。

Answer 3

它跳转是因为您使用 javascript 将 wrapper 高度设置为 body 高度（但您没有在屏幕调整大小时更新它）。一种选择是每次屏幕调整大小时更新包装器高度

购买为什么不直接删除 javascript 并使用 css:

html,body,#wrapper{height:100%;}

Answer 4

你需要看看响应式网页设计。使用 RWD，您可以在不同设备上工作时重新缩放图像。看看Media Queries。这将解决您的问题，您的网站将适合任何设备。另外有什么需要可以问。

Answer 5

body {
background-size: cover;

}

只需将背景大小添加到您的正文标签中

全屏背景不适用于移动设备

Full Screen background does not works on mobile

html

css

fullscreen

background-image