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

브라우저 Viewport 구하기

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

  • document.documentElement.clientWidth / clientHeight
    문서의 viewport 크기
  • window.innerWidth / innerHeight
    브라우저 viewport 의 스크롤 포함 크기
  • window.outerWidth / outerHeight
    브라우저 창 크기
  • document.documentElement.offsetWidth / offsetHeight
    문서의 크기
// javascript
document.documentElement.clientWidth
window.innerWidth
window.outerWidth
// 1165 1180 1180// 200% 확대
// 583 590 1180

screen

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

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

vw 와 vh

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

// 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>

CSS Position

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

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

Media Query

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

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

Mobile Viewport

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

// html
<meta name="viewport" content="width=device-width, initial-scale=1">
// 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개의 뷰포트가 존재한다.

// 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

--

--

Javascript is great We may not be great

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store