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

CSS background-size:cover로 Mobile Safari의 한계 극복

웹 개발 영역에서는 다음과 같은 배경 이미지를 갖는 것이 종종 바람직합니다. 전체 용기를 채우기 위해 원활하게 늘어납니다. CSS는 이 목적을 위해 background-size:cover 속성을 제공하지만 iOS 기기의 경우 예상치 못한 문제를 야기합니다.

문제

배경을 적용할 때- 크기: iOS 기기에서 div를 덮으면 배경 이미지가 전체 영역을 덮지 못합니다. 대신 원래의 가로 세로 비율을 유지하고 축소하여 이미지와 컨테이너가 잘못 정렬됩니다.

해결 방법

문제는 배경 크기에 있는 것이 아닙니다. : 커버하지만 background-attachment: 고정 속성을 사용합니다. 이 문제를 해결하려면 미디어 쿼리를 사용하여 iPhone 장치의 첨부 동작을 재정의하여 배경 이미지가 콘텐츠와 함께 스크롤되도록 할 수 있습니다.

.section {
  ...
  background-attachment: fixed;
  background-position: center center;
}

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

이 예에서 @iphone-screen은 사전- iPhone 장치의 최대 화면 너비를 나타내는 변수를 정의했습니다. 이러한 장치에 대해 스크롤하도록 배경 첨부를 설정하면 이제 배경 이미지가 컨테이너를 완전히 덮고 다양한 뷰포트 너비와 콘텐츠 크기에 맞게 조정됩니다.

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