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; 因为我发现了与该建议相似的 question，但它没有用。

Answer 1

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

Answer 2

感谢@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 的回答是最好的。检查一下。

Answer 3

如此处所述viewport units caniuse，使用视口单位可能（并且将会）导致 iOS 出现问题，因为

iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.

iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.

vh on iOS is reported to include the height of the bottom toolbar in the height calculation, and the width of the sidebar (bookmarks) in the vw width calculation.

所以我建议您使用媒体查询并针对纵向和横向设置不同的 iOS 分辨率。我知道，这是一项细致的任务，但如果你有一个针对认真客户的认真项目，你就必须交付认真的产品

看这里 > iosres

例如

 /* 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())

这将使身高等于 window 身高

Ipad 上的背景图片未显示 100%

Background image on Ipad do not display 100%

html

css

ipad

ios