0

各交互セクションに固定の背景画像があり、コンテンツが画像をスクロールすることになっているレスポンシブ サイトがあります。現在、iOS では、画像の小さなセクションにズームインし、コンテンツ div に合わせて拡大します (基本的に、大きな灰色の背景になります)。iPhone ブラウザでも固定背景でセクションをスクロールできるようにするにはどうすればよいですか?

背景の現在のコードは次のとおりです。

.scroll-background {
  background: url("../imgs/misc.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.scroll-background2 {
  background: url("../imgs/misc2.jpeg") no-repeat top center fixed;
  background-size: cover;
}
.center{
  padding: 0 2em;
  margin: 0;
  position: relative;
  top: 50%;
}

そしてhtml：

***編集レスポンシブなものをすべて取り出しましたが、画像が含まれるセクションだけでなく、ページ全体にスケーリングされているという問題があることがわかりましたが、それは次の場合にのみ発生しますiOS でブラウザを使用する。たとえば、「about」セクションの背景画像は、3 つのセクションすべてをカバーするようにスケーリングされ、背景の拡大部分が最初のセクションに表示されます。他のセクションを削除すると、画像は正しいサイズに縮小されます。

<body id="top">
      <section id="about">
        <div class="scroll-background center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="skills">
        <div class="center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu.
            </p>
        </div>
      </section>

      <section id="portfolio">
        <div class="scroll-background2 center">
            <p>
              Lorem ipsum dolor sit amet, ut ac etiam sed vitae dictum euismod, blandit in aliquam odio ac sed duis. Lacus velit mollis augue sem eu. 
            </p>
        </div>
      </section>
    </body>

ありがとう

4

1 に答える 1