Ipad 上的背景图像不显示 100%

Question

我用于背景的图像(固定(以 Web 格式显示 100%，但当我在 Ipad (1024x768( 上模拟它时，图像停止适应屏幕宽度，它只占屏幕高度的 70% 左右。

这是我用于网站格式的 CSS：

.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
width: 100%;
}

这是我用于 iPad 样式的 CSS：

@media screen and (max-width: 1024px) {
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
min-width: 1024px;
}
}

我已经尝试过min-width: 1024px;因为我发现了一个类似的问题，但它没有奏效。

Answer 1

如这里所述，使用视口单位可以(并且会(在iOS中引起问题，因为

当方向发生变化时，iOS 7 Safari 会将 vh 中设定的宽度重新计算为 vw，并将 vw 中设定的高度重新计算为 vh。

iOS 7 Safari 会将视口单位值设置为 0，如果页面已离开并在 60 秒后返回。

据报道，iOS 上的 vh 在高度计算中包括底部工具栏的高度，在 vw 宽度计算中包括侧边栏(书签(的宽度。

因此，我建议您使用媒体查询，并为纵向和横向定位不同的iOS分辨率。我知道，这是一项细致的任务，但如果你有一个严肃的项目，你必须交付严肃的产品

在这里看> iosre

例如

/* iPad with portrait orientation.*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.body{
height: 1024px;
}
}

/*iPad with landscape orientation.*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.body{
height: 768px;
}
}
/*iPhone 5 with aspect ratio*/
@media screen and (device-aspect-ratio: 40/71) {
.body {
height: 500px;
}
}

或者你可以使用jQuery或javascript，例如

$(".body").height($(window).height())

这将等于身体高度到窗口高度

Answer 2

尝试使用width: 100vw. vw 表示视口宽度，因此这应该使背景占据视口的整个宽度。

Answer 3

多亏了@Traver我找到了答案：

.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200vh;
height: 5700px;
width: 100%;
}

我只需要将背景大小单位更改为 vh 并删除自动(但我也用它测试过并且它有效(。给它一个 200vh 的数字足以缩放它的整个宽度和高度。

编辑：Mihai T的答案是最好的。检查一下。