Mobile Safari で「background-size: cover」が失敗する理由とその修正方法

背景サイズの制限を克服する: Mobile Safari でカバー

iOS デバイスには、背景画像を実装する際に特有の課題があります。背景サイズ: cover を使用して要素全体をカバーします。予期された動作にもかかわらず、このプロパティはこれらのプラットフォームで望ましくない結果をもたらすことがよくあります。

この問題に対処するために、賢い回避策が登場しました。特に iPhone を対象としたメディア クエリ内でスクロールするように background-attachment プロパティを調整することで、問題のある動作を修正できます。

提供されたコードの更新バージョンは次のとおりです。

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

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

以下を含めることにより、このメディア クエリでは、background-attachment プロパティは、事前定義された @iphone-screen 変数以下の幅を持つデバイスに対してのみスクロールするように設定されます。これにより、背景画像が大きな画面上で固定位置を維持しながら、iPhone 上で期待どおりに動作することが保証されます。

このソリューションは、この一般的な問題に対処するシンプルかつエレガントな方法を提供し、シームレスな全幅の背景画像を作成できるようにします。 iOS を含むすべてのデバイスで。

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