<div id="readability-page-1" class="page"><div>간만에 해서 기억이 증발했다.
<h2 id="기본적으로-safe-area는-적용해두자">기본적으로 safe area는 적용해두자.</h2>
<ul>
<li>다만 하단 인디케이터나 주소창 같은 경우의 대응은 안되는 경우가 많다.</li>
<li>브라우저/OS 버전이나, 디바이스 종류에 따라 위 요소들을 브라우저의 일부로 보는경우도 있음</li>
</ul>
<h2 id="최신-브라우저">최신 브라우저</h2>
아래 css 요소들 중 필요한 하나를 활용하면 된다. 
<a href="https://caniuse.com/">can i use</a>에서 확인해볼 것
<ul>
<li>svh (Small Viewport Height) 
브라우저 UI가 모두 펼쳐진 상태의 viewport 높이 (주소창/툴바 다 보이는 상태)</li>
<li>lvh (Large Viewport Height) 
브라우저 UI가 모두 숨겨진 상태의 viewport 높이</li>
<li>dvh (Dynamic Viewport Height) 
현재 상태(주소창이 접히거나 펼쳐진 상태)의 실시간 viewport 높이</li>
</ul>
<h2 id="구형-브라우저">구형 브라우저</h2>
스크립트를 통해 직접 계산하도록 구현하면된다.
<pre><code>function setRealVH() {
 const vh = window.innerHeight * 0.01;
 document.documentElement.style.setProperty('--vh', `${vh}px`);
 }
setRealVH();
window.addEventListener('resize', setRealVH);</code></pre>
리엑트를 사용하고 있을 경우, 
아래처럼 이 세 개의 로직을 담고 있는 레이아웃 형태의 컴포넌를 구성해서 사용하면 재사용하기 좋다.</div></div>

ginameee.log

Jangchun Lee

간만에 해서 기억이 증발했다.
기본적으로 safe area는 적용해두자.
다만 하단 인디케이터나 주소창 같은 경우의 대응은 안되는 경우가 많다.
브라우저/OS 버전이나, 디바이스 종류에 따라 위 요소들을 브라우저의 일부로 보는경우도 있음
최신 브라우저
아래 css 요소들 중 필요한 하나를 활용하면 된다.
can i use에서 확인해볼 것
svh (Small Viewport Height)
브라우저 UI가 모두 펼쳐진 상태의 viewport 높이 (주소창/툴바 다 보이는 상태)
lvh (Large Viewport Height)
브라우저 UI가 모두 숨겨진 상태의 viewport 높이
dvh (Dynamic Viewport Height)
현재 상태(주소창이 접히거나 펼쳐진 상태)의 실시간 viewport 높이
구형 브라우저
스크립트를 통해 직접 계산하도록 구현하면된다.
function setRealVH() {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
setRealVH();
window.addEventListener('resize', setRealVH);
리엑트를 사용하고 있을 경우,
아래처럼 이 세 개의 로직을 담고 있는 레이아웃 형태의 컴포넌를 구성해서 사용하면 재사용하기 좋다.

모바일 웹뷰/브라우저 viewport height 대응

댓글