2

iOS デバイスの固定背景で発生している問題の解決策を見つけようとしています。この Web サイトのすべてを再設計する必要はなく、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;
}

また、stackoverflow のいくつかの投稿を使用して、クエリを使用して iOS 用に修正しようとしました@mediaが、これは何の効果もないようでした。

@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>
4

2 に答える 2

-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;
}

最後にposition:fixed、jquery を使用して iPad、iPhone、iPod を非アクティブ化します

// 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');
}
});
于 2017-10-12T00:41:04.040 に答える