모바일 브라우저에서 주소 표시줄이 숨겨지는 것을 어떻게 막을 수 있나요?

모바일 브라우저에서 표시되는 주소 표시줄 유지

가로 레이아웃의 웹사이트를 디자인할 때 개발자는 자동으로 주소 표시줄 문제에 직면하는 경우가 많습니다. 스크롤할 때 숨김. 이로 인해 콘텐츠 상자 내의 세로 스크롤이 중단되고 원치 않는 창 크기 조정 이벤트가 발생할 수 있습니다. 이 문제를 해결하기 위해 다양한 장치에서 이 자동 숨김 메커니즘을 비활성화하는 솔루션을 모색하고 있습니다.

해결책:

다음 CSS 코드는 주소 표시줄이 표시되는 것을 효과적으로 방지합니다. 자동 숨김:

<code class="css">html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}</code>

설명:

• html 요소의 Overflow: Hidden 속성은 스크롤을 완전히 비활성화합니다.
• body 요소의 position: 고정 속성은 뷰포트 내에서 본문의 위치가 고정되도록 보장하여 창 크기 조정 이벤트가 필요하지 않게 합니다.
• overflow-y: 스크롤 속성을 사용하면 본문 내에서 세로 스크롤이 가능합니다.
• -webkit-overflow-scrolling: 터치 속성은 iOS 기기의 스크롤 성능을 최적화합니다.

데모:

다음 예는 솔루션의 영향을 보여줍니다.

• 해결 방법 없음: http://maxeffenberger.de/test.html(스크롤할 수 없음)
• 해결 방법 있음: http ://maxeffenberger.de/test2.html(가로 및 세로 스크롤 가능)

이 CSS 코드를 구현하면 개발자는 주소 표시줄이 자동으로 숨겨지는 것을 방지하고 모바일 브라우저에서 원활한 스크롤 환경을 보장할 수 있습니다.

위 내용은 모바일 브라우저에서 주소 표시줄이 숨겨지는 것을 어떻게 막을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!