모바일 Safari에서 'background-size:cover'가 실패하는 이유와 해결 방법은 무엇입니까?

배경 크기의 한계 극복: 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;
  }
}

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

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

위 내용은 모바일 Safari에서 'background-size:cover'가 실패하는 이유와 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!