Mobile Safari で背景サイズ: カバーが失敗する理由とその修正方法

CSS を使用して Mobile Safari の制限を克服するbackground-size: cover

Web 開発の領域では、背景画像を使用することが望ましい場合がよくあります。シームレスに伸びて容器全体を満たします。 CSS はこの目的のために、background-size: cover プロパティを提供しますが、iOS デバイスに関しては予期せぬ課題が生じます。

問題

背景を適用するとき-サイズ: iOS デバイスの div にカバーすると、背景画像は領域全体をカバーできません。代わりに、元のアスペクト比が維持されて縮小され、その結果、画像とコンテナーの間の位置がずれます。

解決策

問題は背景サイズにありません。 : カバーですが、background-attachment: 固定プロパティが付いています。これを解決するには、メディア クエリを使用して iPhone デバイスの添付ファイルの動作をオーバーライドし、背景画像がコンテンツとともにスクロールできるようにします。

.section {
  ...
  background-attachment: fixed;
  background-position: center center;
}

@media (max-width: @iphone-screen) {
  .section {
    background-attachment: scroll;
  }
}

この例では、@iphone-screen はプレiPhone デバイスの最大画面幅を表す定義済み変数。これらのデバイスで背景添付ファイルをスクロールするように設定すると、背景画像がコンテナを完全に覆い、さまざまなビューポートの幅とコンテンツ サイズに合わせて調整されるようになります。

以上がMobile Safari で背景サイズ: カバーが失敗する理由とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。