배경 크기 제한 극복: Mobile Safari의 커버

iOS 기기는 다음과 같은 배경 이미지 구현과 관련하여 독특한 과제를 제시합니다. background-size:cover를 사용하여 전체 요소를 덮습니다. 예상되는 동작에도 불구하고 이 속성은 종종 이러한 플랫폼에서 바람직하지 않은 결과를 낳습니다.

이 문제를 해결하기 위해 영리한 해결 방법이 나타났습니다. 특히 iPhone을 대상으로 하는 미디어 쿼리 내에서 스크롤하도록 배경 연결 속성을 조정하면 문제가 있는 동작을 수정할 수 있습니다.

제공된 코드의 업데이트된 버전은 다음과 같습니다.

.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;
  }
}

이 미디어 쿼리를 포함하면 사전 정의된 @iphone-screen 변수보다 너비가 작거나 같은 장치에 대해서만 background-attachment 속성이 스크롤되도록 설정됩니다. 이를 통해 배경 이미지가 더 큰 화면에서 고정된 위치를 유지하면서 iPhone에서 예상대로 작동하도록 보장합니다.

이 솔루션은 이 일반적인 문제를 처리하는 간단하고 우아한 방법을 제공하여 원활한 전체 너비 배경 이미지를 만들 수 있습니다. iOS를 포함한 모든 기기에서.