브라우저 뷰포트 (layout 와 visual viewport) 간단 정리하기

최근 Browser Viewport 에 대한 궁금증이 생겨 이를 간단히 정리해보고자 한다.

브라우저 에서 Viewport 는 화면 크기를 이야기하며, 메뉴바, 탭영역 등을 제외한 순수 화면 영역이다.

Viewport 의 영역은 디바이스 크기와, 각각의 브라우저 마다 계산되는 영역이 달라 같은 웹페이지라도 환경에 따라, 매우 다양해진다.

Viewport 는 화면이 크기이기 때문에, viewport 보다 웹 문서가 클 경우 스크롤이 생성되며, 이를 가지고 viewport 를 이동시킬 수 있다.

브라우저 Viewport 구하기

브라우저의 Viewport 를 구하기 위해서 아래 값들로 확인할 수 있다.

• document.documentElement.clientWidth / clientHeight
  문서의 viewport 크기
• window.innerWidth / innerHeight
  브라우저 viewport 의 스크롤 포함 크기
• window.outerWidth / outerHeight
  브라우저 창 크기

만약 문서의 크기를 알아야 한다면 아래값으로 확인할 수 있다.

• document.documentElement.offsetWidth / offsetHeight
  문서의 크기

만약 브라우저 화면을 확대하거나, 축소할 경우 viewport 크기는 변화하게 된다.

이때 document.documentElement.clientWidth 와 window.innerWidth 의 값은 변화하지만, 브라우저 창의 크기인 outerWidth 는 변하지 않는다.

// javascript
document.documentElement.clientWidth
window.innerWidth
window.outerWidth
// 1165 1180 1180
// 200% 확대
// 583 590 1180

screen

screen 는 viewport 와 관계없이 화면의 전체 크기와 픽셀값들을 가지고 있다.

때문에 브라우저의 상태와 관계 없이 screen.width 와 screen.height 으로 현재 모니터 크기를 알 수 있다.

// javascript
screen.width // 2560
screen.height // 1440

vw 와 vh

css 의 vw 와 vh 는 viewport weigth 와 viewport heigth 으로 css unit 중 하나이다.

이 단위로 CSS 크기를 설정하게 되면, 브라우저의 viewport 크기만큼 계산되어 적용된다.

때문에 화면이 커지거나 작아질 때마다, 자동으로 크기가 변화하게 되며, 디바이스 사이즈에 맞는 크기를 적용할 수 있게 된다.

width 가 100vw 인 Element 를 만들고, clientWidth 를 확인해보면, 브라우저 환경에 따라, document.documentElement.clientWidth 나 window.innerWidth 의 크기와 같은 것을 알 수 있다.

// html
<style>
#test { width: 100vw; }
</style>
<div id="test"></div>
<script>
console.log(document.documentElement.clientWidth, window.innerWidth);
// 949 964
console.log(document.getElementById("test").clientWidth);
// 964
</script>

결과값은 브라우저마다 달라질 수 있다.

아래 링크에서 더 자세한 정보를 얻을 수 있다.

https://www.sitepoint.com/css-viewport-units-quick-start/

CSS Position

css fixed position 은 상태에 따라 viewport 의 영향을 받는다.

top, bottom, left, right 로 설정한 값은 viewport 의 위치에 따라, 계산되어 적용되며, viewport 위치에 고정되게 된다.

모바일에서는 사용자의 액션에 따라 (keyboard, 확대/축소 등) 이 viewport 의 위치가 달라지게 되며, 원하는 위치와 다르게 나올수 있다.

// css
#test {
position: fixed;
bottom: 0;
}

Media Query

미디어 쿼리는 화면의 크기 또는 Viewport 크기에 따라 CSS 를 조절할 수 있다.

이때 width 는 스크롤 크기를 포함한 window.innerWidth 의 viewport 크기와 같다.

// css
@media screen and (min-width: 600px) {
  //…
}

Mobile Viewport

모바일 디바이스는 보통 높은 해상도를 가지지만, 디바이스의 화면이 작기 때문에, 데스크톱 모니터에 비해 가독성이 떨어질 수 밖에 없다.

이를 해결하기 위해서 Apple 에서 viewport meta 태그를 도입하였고, 많은 브라우저에서 이 태그를 지원한다.

// html
<meta name="viewport" content="width=device-width, initial-scale=1">

이 태그를 가지는 웹 사이트는 브라우저에서 viewport 를 계산할때 참고하게 되는데, 위의 값은 device-width 은 디바이스 화면 크기인, screen.width 값을 참고하게 된다.

// javascript
// 지원하는 사이트
window.screen.width // 375
window.outerWidth // 375
window.innerWidth // 375
document.documentElement.clientWidth // 375
// 지원하지 않는 사이트
window.screen.width // 375
window.outerWidth // 375
window.innerWidth // 1115
document.documentElement.clientWidth // 980

Layout viewport 와 Virsual viewport

모바일 브라우저에는 Layout viewport 와 Virsual viewport 2개의 뷰포트가 존재한다.

Layout viewport 는 고정된 화면으로 사용자의 액션에 영향을 받지 않는다.

css fixed 로 설정한 viewport 값 들은 이에 영향을 받아, 위치가 변하지 않게 된다.

Virsual viewport 는 유동적인 화면으로 사용자의 액션에 영향을 받는다.

사용자가 손가락으로 화면을 확대하면, 이 virsual viewport 가 영향을 받아 크기가 변하게 된다.

화면을 키우고, viewport 를 확인해보면, document.documentElement.clientWidth 은 변하지 않고, window.innerWidth 만 변한 것을 확인할 수 있다.

// javascript
// 확대전
window.screen.width // 375
window.outerWidth // 375
document.documentElement.clientWidth // 980
window.innerWidth // 1115
// 확대후
window.screen.width // 375
window.outerWidth // 375
document.documentElement.clientWidth) // 980
window.innerWidth // 412

이러한 Layout viewport 와 Virsual viewport 는 브라우저와 OS 마다 구현방법이 다르다.

아래 페이지에서 다양한 브라우저의 Viewport 상태를 확인해볼 수 있다.

https://bokand.github.io/viewport/index.html

아래 사이트에서 더 자세한 정보를 얻을 수 있다.

https://www.quirksmode.org/mobile/viewports2.html