Viewport 사이즈 - Viewport saijeu

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

목차 Show

브라우저 Viewport 구하기
CSS Position
Media Query
Mobile Viewport
Layout viewport 와 Virsual 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 964console.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

The above snippet uses a < browser sniffing library > , which in itself isn’t privacy focused, but in this instance I’m being upfront about it and recognising it’s information you might want/expect using this tool. We know that browser sniffing tools aren’t always accurate because all browsers lie, so if you’d like a version of this tool without the browser info, then use our Lite version.

Making cleaner websites

I’m aiming to make cleaner energy websites by using best practices like minimal code, lazy-load images and minimising scripts. This website:

– uses 0.51g of CO2 each load.
– uses 130kWh of power each 10,000 page loads.
– is cleaner than 75% of all websites in the world.

Yes, this is cleaner than 75% of all websites on the internet. It could be made even cleaner if there was reliable hosting in Australia that ran on renewable energy (one day). If you’re interested in making faster, cleaner and more environmentally friendly websites, visit websitecarbon.com.