Question

我试图找到解决我在iOS设备上使用固定背景的问题的方法。我宁愿不必重新设计这个网站的所有内容，我希望一些CSS更改可以修复它。 This是网站在iPhone上的样子，this就是它的外观。我使用的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上的一些帖子来修复iOS，但这似乎没有任何效果：

@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

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

首先，你需要声明你的身体和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。

希望能帮助您/无论谁来寻找这个！

Answer 2

对于具有固定背景的所有div，我添加了类class="parallax iparaxify paraxify" 在我的主要css文件中，我有：

.parallax {
width: 100%;
background url(../images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

最后使除了i产品之外的所有东西都成为视差

.paraxify {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

最后为ipad，iphone和ipod取消position:fixed jquery

// adds mobile class, and mobile os to html tag
jQuery(document).ready(function($){
var deviceAgent = navigator.userAgent.toLowerCase();

if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$('.iparaxify').removeClass('paraxify');
}
});

背景 - 附件：修复了在iOS上不起作用的问题

2 个答案: