我正在尝试找到解决 iOS 设备上固定背景问题的方法。我宁愿不必重新设计这个网站的所有内容,我希望一些 CSS 更改可以解决它。This https://i.stack.imgur.com/Yxa22.jpg该网站在 iPhone 上的外观是这样的,并且this https://i.stack.imgur.com/Qhcan.jpg它应该是这样的。我使用的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>
我刚刚经历了同样的问题,这就是我解决它的方法。
首先,您需要声明您的 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:触摸。
希望这对您/任何来寻找此内容的人有所帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)