모바일 Chrome에서 전체 화면 배경 이미지가 흔들리는 이유는 무엇이며 어떻게 해결할 수 있습니까?

모바일 Chrome에서 배경 이미지 지터링

모바일, 태블릿, 태블릿에서 전환되는 전체 화면 배경 이미지를 갖춘 반응형 웹사이트 개발 중 데스크톱의 경우 iOS/Android 브라우저 또는 Chrome에서 주소 표시줄이 숨겨지면 배경이 약간 점프하는 것이 관찰되었습니다. Android.

이 문제는 "고정" 및 "표지" 설정을 포함하는 배경 이미지의 CSS 속성에서 발생합니다. 주소 표시줄이 사라지면 배경 div의 높이가 100%로 설정되어 있으므로 높이가 변경됩니다. 이는 결국 배경 이미지에 영향을 미쳐 새 컨테이너 크기에 맞게 크기와 위치를 조정하게 됩니다.

이 문제를 해결하기 위해 두 가지 솔루션이 제안됩니다.

해결책 1: CSS vh 단위 사용(권장하지 않음)

배경 div의 높이를 100vh로 설정하면 원하는 동작이 유지됩니다. 그러나 iOS에는 뷰포트 단위 측정에 불일치를 일으키는 알려진 vh 버그가 있습니다. 최대 높이 또는 다른 해결 방법으로 이 문제를 완화하려는 시도는 성공하지 못했습니다.

해결책 2: Javascript를 사용하여 뷰포트 크기에 따라 높이 설정

Javascript는 더 많은 것을 제공합니다. URL 표시줄의 크기 조정에 영향을 받지 않으므로 신뢰할 수 있는 접근 방식입니다. 뷰포트 크기를 결정하고 이에 따라 배경 div의 높이를 설정하면 주소 표시줄의 가시성에 관계없이 이미지가 정적으로 유지됩니다.

Javascript 스크립트는 다음과 같습니다.

추가 조정:

Javascript 스크립트가 배경 크기 조정 문제를 해결하는 동안 다음과 같은 경우 눈에 띄는 간격이 나타날 수 있습니다. 아래로 스크롤합니다. 이 문제는 배경 높이 계산에 작은 오프셋을 추가하여 잠재적인 격차를 효과적으로 숨겨 해결할 수 있습니다.

위 내용은 모바일 Chrome에서 전체 화면 배경 이미지가 흔들리는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!