주소 표시줄이 숨겨지면 모바일 Chrome에서 전체 화면 배경 이미지가 이동하는 이유는 무엇입니까?

iOS/Android/모바일 Chrome에서 주소 표시줄 숨김의 배경 이미지 오프셋

문제

전체 기능을 포함하여 CSS를 사용하여 반응형 웹사이트를 개발할 때 -두 div 사이에서 회전하고 페이드되는 화면 배경 이미지, 예상치 못한 동작 발생: iOS Safari, Android 브라우저에서 아래로 스크롤할 때 배경 이미지가 약간 점프합니다. 또는 안드로이드 크롬. 이는 주소 표시줄이 숨겨져 결과적으로 배경 div의 크기가 조정되어 발생하며, 이는 고정되어 높이 100%로 설정됩니다.

해결 방법

이 문제를 해결하려면 두 가지 가능한 해결 방법이 있습니다. :

1. #bg1 및 #bg2 높이를 다음으로 설정합니다. 100vh: 이 솔루션은 뷰포트 높이를 사용하여 적절한 높이를 설정하므로 이론적으로 우아합니다. 그러나 iOS에는 이 솔루션에 영향을 미치는 vh 버그가 있습니다.
2. JavaScript를 사용하여 정적 높이 설정: JavaScript로 결정되는 뷰포트 크기는 주소 표시줄의 영향을 받지 않습니다. 따라서 JavaScript는 뷰포트 크기에 따라 배경 div의 정적 높이를 설정할 수 있습니다. 이는 순수하지 않은 CSS 특성과 페이지 로드 시 약간의 이미지 점프로 인해 이상적인 솔루션은 아니지만 iOS의 vh 버그를 고려하면 실행 가능합니다.

다음 JavaScript 코드를 사용하면 배경이 조정됩니다. 동적으로 높이:

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

추가 고려 사항

위 솔루션은 배경 크기 조정을 효과적으로 방지하지만 사용자가 아래로 스크롤할 때 눈에 띄는 간격이 발생할 수 있습니다. 이러한 차이는 배경 높이에서 URL 표시줄 높이를 뺀 화면 높이와 일치하기 때문에 발생합니다. 높이에 60px을 추가하면 이 문제가 해결될 수 있지만 이는 URL 표시줄이 있을 때 배경 이미지의 하단 60px가 표시되지 않음을 의미합니다.

function resizeBackground() {
    bg.height( $(window).height() + 60);
}

이러한 크기 조정은 주목할 가치가 있습니다. iOS 및 Android의 URL 표시줄은 웹사이트 기능에 미치는 영향으로 인해 우려를 불러일으켰습니다. 목적은 이해되지만 그 동작은 CSS 기반 디자인에서 예상치 못한 문제를 일으킬 수 있습니다.

위 내용은 주소 표시줄이 숨겨지면 모바일 Chrome에서 전체 화면 배경 이미지가 이동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!