제목이 다음과 같이 변경됨: CSS3의 100vh 값은 모바일 브라우저에서 고정되지 않습니다.
P粉682987577
2023-08-21 16:49:22
<p>매우 이상한 문제가 있습니다... 제가 접하는 모든 브라우저와 모바일 버전에서 다음 동작이 나타납니다. </p>
<li>페이지가 로드되면 모든 브라우저에는 스크롤을 시작할 때 위로 올라가는 상단 메뉴(예: 주소 표시줄 표시)가 있습니다. </li>
<li>때때로 100vh는 뷰포트의 보이는 부분에서만 계산되므로 브라우저 표시줄을 위로 슬라이드하면 100vh가 증가합니다(픽셀 단위).</li>
<li>크기가 변경되었기 때문에 모든 레이아웃이 다시 그려지고 크기가 조정됩니다.</li>
<li>사용자 경험에 좋지 않습니다</li>
</ul>
<p>이 문제를 피하는 방법은 무엇입니까? 뷰포트 높이에 대해 처음 들었을 때 블록의 고정 높이를 설정하기 위해 JavaScript를 사용하는 대신 이를 사용할 수 있다고 생각했지만 이제는 실제로 JavaScript와 일부 크기 조정 이벤트를 사용하는 것이 유일한 방법이라고 생각합니다... </p>
<p>여기에서 문제를 볼 수 있습니다: 샘플 사이트</p>
<p>이 문제를 해결하도록 도와주거나 CSS 솔루션을 제공할 수 있는 사람이 있나요? </p>
<시간 />
<p>간단한 테스트 코드:</p>
<p><br /></p>
<pre class="brush:js;toolbar:false;">/* 문제가 발생한 시점을 추적할 수 있을 것 같습니다... */
$(함수(){
var 크기 조정됨 = -1;
$(창).resize(함수(){
$('#currenth').val( $('.vhbox').eq(1).height() );
if (++크기 조정) $('#currenth').css('배경:#00c');
})
.크기 조정();
})</pre>
<pre class="brush:css;toolbar:false;">*{ 여백:0;
/*
이것은 같은 높이를 유지해야 하는 상자입니다...
텍스트가 너무 많은 경우 콘텐츠가 뷰포트 높이를 초과할 수 있도록 최소 높이를 사용하세요.
*/
.vhbox{
최소 높이:100vh;
위치:상대적;
}
.vhbox .t{
표시:테이블;
위치:상대적;
너비:100%;
높이:100vh;
}
.vhbox .c{
높이:100%;
디스플레이:테이블 셀;
수직 정렬:가운데;
텍스트 정렬:가운데;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="vhbox" style="Background-color:#c00">
<div class="t"><div class="c">
이 div의 높이는 표시 영역의 100%여야 하며 페이지를 스크롤할 때 이 높이를 유지해야 합니다.
<br>
<!-- 크기 조정 이벤트가 발생하면 이 입력 상자가 강조 표시됩니다 -->
<input type="text" id="currenth">
</div>
<div class="vhbox" style="배경색:#0c0">
<div class="t"><div class="c">
이 div의 높이는 표시 영역의 100%여야 하며 페이지를 스크롤할 때 이 높이를 유지해야 합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS에서
min-height: -webkit-fill-available;而不是100vh를 사용해 볼 수 있습니다. 이렇게 하면 됩니다안타깝게도 이것은 의도적인 것입니다...
이 문제는 잘 알려진 문제(적어도 Safari 모바일에서는)이며 다른 문제를 방지하기 위한 의도적인 문제입니다. Benjamin Poulain이 웹킷 버그에 응답했습니다:
Nicolas Hoizey는 이에 대해 꽤 많은 연구를 수행했습니다. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document- -some-mobile-browsers.html
수정 계획 없음
현재 모바일 장치에서 뷰포트 높이를 사용하지 않는 것 외에는 할 수 있는 일이 많지 않습니다. 2016년에는 Chrome도 변경되었습니다.