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

【问题标题】：Background image on Ipad do not display 100%Ipad 上的背景图像不显示 100%
【发布时间】：2018-01-09 14:38:45
【问题描述】：

我用于背景的图像（已修复）以 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 与该建议，但它没有奏效。

【问题讨论】：

你可以试试宽度：100vw；？如果有帮助我会写一个答案
@Traver 好的，我现在就试试。
我已经在背景尺寸（而不是宽度）上尝试过它并且它已经工作了！谢谢！我将在下面发布完整的答案。
我看到您将使用 vh/vw 单位。请在下面查看我的答案以获取重要信息

标签： ios css html ipad

【解决方案1】：

正如viewport units caniuse 所述，使用视口单元可能（并且将会）在 iOS 中导致问题，因为

当方向改变时，iOS 7 Safari 将 vh 中设置的宽度重新计算为 vw，并将 vw 中设置的高度重新计算为 vh。

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

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

所以我建议您使用媒体查询并针对纵向和横向定位不同的 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())

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

【讨论】：

哇，感谢您提供的信息。当我使用 React.js 开发项目时，我不能使用 jQuery，但我会做你的第一个选择。我会将您的答案标记为最佳答案。

【解决方案2】：

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

【讨论】：

是的，我不得不改变我的单位。我已经完全解释了我在下面所做的事情。并感谢您的帮助！ :)

【解决方案3】：

感谢@Traver，我找到了答案：

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

我只需将背景大小单位更改为 vh 并删除 auto（但我也对其进行了测试并且它有效）。给它一个 200vh 的数字就足以缩放它的全宽和全高。

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

【讨论】：