브라우저 뷰포트 (layout 와 visual 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

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

vw 와 vh

// 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
#test {
position: fixed;
bottom: 0;
}

Media Query

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

// 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
박성룡 ( Andrew park )

박성룡 ( Andrew park )

Javascript is great We may not be great

More from Medium

Through a Glass, Darkly — Sam “One-Wheel” O’Neil

The Making of My Easter Bunny for Voxedit Contest

Taking a break from it all sounds lovely — were it not for the feeling of losing it all