背景附件：修复在 iOS 上不起作用

Question

我正在尝试找到解决我在 iOS 设备上使用固定背景的问题的方法。我宁愿不必为这个网站重新设计所有东西，我希望一些 CSS 更改可以解决它。这就是网站在 iPhone 上的样子，这也是它应该有的样子。我使用的 CSS 代码如下：

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

我还尝试使用@media查询来修复它，使用 stackoverflow 上的一些帖子，但这似乎没有任何效果：

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
} 

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div>
</div>

Answer 1

我刚刚遇到了同样的问题，这就是我解决它的方法。

首先，您需要将 body 和 html 声明为 100% 宽和 100% 高：

html, body{
	width: 100%;
	height: 100%;
}

然后，页面上的滚动不能由主体完成：您必须将其包装在容器上。这个容器需要三个参数：overflow:scroll、width: 100% 和 height: 100%。我建议将整个站点包装在其中：

#wrapper{
		width: 100%;
		height: 100%;
		overflow: scroll;
	}

如果你不喜欢它的滚动方式，你也可以尝试添加 -webkit-overflow-scrolling: touch。

希望能帮助你/任何来找这个的人！