背景附件：固定+背景尺寸：在iPad上覆盖？

Question

我有一些高度为100％的块，并且可以通过单个鼠标滚轮向下滚动（我使用mousewheel.js做到了）。 在那个块中，我还有另外两个块，其高度和宽度为100％，并且背景图像随着淡入淡出效果而变化。 我设置了background-size: cover和background-attachment: fixed为此块background-attachment: fixed的。 它可以在桌面浏览器上正常工作。 但是在iPad上，我有一些问题：

.first-block {
background-size: cover;
background-attachment: fixed;
position: absolute;
-webkit-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
top: 0;
}

1. fixed并cover在一起不起作用，图像过大..我决定设置background-attachment: scroll并模拟background-attachment: fixed使用jQuery添加此代码进行background-attachment: fixed

    $(window).scroll(function() { var scrolledY = $(window).scrollTop(); $('.first-block').css('background-position', 'center ' + ((scrolledY)) + 'px'); }); 

它的工作正常，但是在Ipad和Safari（Mac OS）上，它的工作速度太慢了。它的浏览器几乎崩溃了。

当我在Ipad中更改显示方向时-不要为每个方向重建背景。 其显示img大小仅是第一个方向。

我在这里阅读了许多类似的问题，但是我找不到适合我的更好的解决方案。 请参阅JsFiddle演示。

固定演示

用jQuery模拟FIXED的演示

谢谢你的帮助。

Answer 1

在理解许多脚本方面，我并不是专家，但是我可以告诉您的内容将完全解决您的问题。 当您使用诸如mousewheel.js之类的脚本时，您将发现手持设备和平板电脑的反应与台式机浏览器的反应将有很大不同。

就您遇到的延迟而言，这可能是由于设备开启的限制所致。 我敢肯定，如果您要在其他平板电脑上尝试一下，将会发现与此类似的结果。 最好的解决方案是使用媒体查询来优化您的网站，以便您可以确保尽管大多数用户都会有您想要的体验，但平板电脑用户仍然可以访问所需的信息和基本的网站功能。

像：

@media (min-width: 700px) and (orientation: landscape) { ... }

和：

@media (min-width: 700px) { ... }

将允许您编写特定于CSS中这些条件的CSS。 您可以在此处找到资源：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

我还建议，如果您希望保留想要的内容，那么我将尝试使用其他具有相同功能的JS文件进行试验。

抱歉，如果我提供的内容不能为您提供所需的确切解决方案。