iOS 上的背景大小答案

【问题标题】：Background size on iOSiOS 上的背景大小
【发布时间】：2014-02-23 22:19:06
【问题描述】：

我整个上午都在研究以下问题。我正在制作一个单页网站，使用大量图像。我知道 Safari 以其对背景附件的怪异处理而闻名：已修复，但这很好用；我的问题是background-size:cover 不能与fixed 一起使用。

我有 5 个页面，所有页面的 height 或 min-height 均为 100%。最后一页是这样固定的：

#div5 {
  height:100%;
  width:100%;
  position: relative;
  background-image: url("img/background.jpg");
  background-attachment:fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

在 iOS 上（在 Chrome 和 Safari 中），背景图片被缩放以覆盖整个网页，所以它真的被拉伸了。

同时，第4页有如下css：

#div4 {
  min-height:100%;
  width:100%;
  background:url(img/portfoliobg.jpg);
  overflow: auto;
  background-size: cover;
}

这就像一个魅力。

所以，当结合fixed 和cover 时，有些东西会让浏览器表现得非常奇怪。有没有人可以解决这个问题？

【问题讨论】：

在 Windows 上的 Safari 和 Chrome 上进行测试时，是否按预期工作？
是的，它完全符合我的要求。 android 上的 chrome 也可以正常工作
@Merijndk 你有什么iOS版本的信息吗？

标签： html ios css background-image

【解决方案1】：

简短的回答：你不能（目前）。

@media screen and (max-width: 1024px) {} 可以玩，但目前 iPad Pro 的分辨率高于普通显示器。

我建议您通过这种方式禁用手机的固定附件：

主 CSS 文件：

.parallax {
   background-attachment: fixed;
   background-size: cover;
}

主 HTML

<script type="text/javascript">
   if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi)) {
      document.write("<link rel=\"stylesheet\" href=\"fixparallax.css\" />");
   }
</script>

附加 fixparallax.css

.parallax {
   background-attachment: scroll !important;
}

【讨论】：

【解决方案2】：

使用另一个带有position:fixed 的 div 来固定背景。

像这样： http://codepen.io/anon/pen/OVebNg

玉

.fixed
  .bgcover

SCSS

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  .bgcover {
      background-image: url('http://globe-views.com/dcim/dreams/winter/winter-04.jpg');
      background-size: cover;
    width: 100%;
    height: 100%;
  }
}

希望对您有所帮助。

【讨论】：