Question

所以我想要做的就是重现这种效果（使用chrome Version 45.0.2454.101 m可以看到）。需要注意的重要一点是，每个div都在包装器中显示整个背景图像的一部分（除了它实际上是一个相同大小的单独图像，通过反转颜色进行修改，以便您可以看到差异）。

基本上，似乎每个内容div都使用的是文档本身大小的背景图像。

结构：

<div class="wrapper">
    <div class="content">
        Here is some content
    </div>
    <div class="content">
        Here is some more content
    </div>
    <div class="content">
        So much content
    </div>
</div>

但是，如果您要在移动设备上访问此链接，您会注意到现在每个div都使用自己的背景图像，而不是与包装器的背景图像重叠。背景图像现在与内容div的大小相同，并且按内容div定位。为什么会发生这种情况？如何让移动网站看起来像桌面浏览器中的体验？（我也在手机上使用chrome）

Link to JS Fiddle

Answer 1

赞扬这项努力，但这根本不会起作用，因为它取决于background-attachment:fixed。移动浏览器尝试通过“智能”处理某些页面内容来主动改善视图体验，尤其是在桌面优化时。

他们选择做的事情之一就是忽略像background-attachment:fixed这样的事情，因为它通常比微型屏幕上不那么智能设计的页面上的内容更多。

所以我很抱歉，http://caniuse.com/#feat=background-attachment这是你的问题，而且不会很快消失：）

移动背景大小

1 个答案: