背景サイズの制限を克服する: 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 を含むすべてのデバイスで。