「background-size: cover」を使用せずにMobile Safariで背景画像を拡大するにはどうすればよいですか?

CSS 背景サイズ: カバーを使用せずに Mobile Safari で背景画像を展開する

CSS 背景サイズ: カバーは通常、展開に使用されます背景画像、特定のシナリオ、特に iOS デバイスでは課題が発生する可能性があります。このような問題の 1 つは、ビューポートのサイズとコンテンツの高さに基づいて幅が異なる可能性がある div をカバーするために背景画像を拡張することです。

この問題の主な原因は、background-size: cover ではなく、background-attachment:fixed です。このプロパティにより、背景画像がページ コンテンツとともに移動してモバイル デバイス上で望ましくない動作が発生するのを防ぎます。

この問題を解決するには、メディア クエリを使用して特に iPhone デバイスをターゲットにし、background-attachment プロパティをスクロールに設定することを検討してください。 。これにより、背景画像がページと一緒にスクロールできるようになり、問題を効果的に解決できます。

iPhone デバイスをターゲットとするメディア クエリを含む CSS コードの例を次に示します。

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

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

これを組み込むことで、メディア クエリを使用すると、背景画像が div 全体をカバーするように拡張されるだけでなく、デスクトップとモバイル デバイスの両方でさまざまなビューポート サイズに適切に適応することを確認できます。

以上が「background-size: cover」を使用せずにMobile Safariで背景画像を拡大するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。