TL; DR
- viewport는 브라우저 창의 크기를 의미한다.
- viewport는 <html>엘리먼트 크기를 제한합니다.
- viewport는 visual viewport와 layout viewport로 나눌 수 있습니다.
- layout viewport는 기기마다 다릅니다.
- visual viewport는 (해상도 / devicePixelRatio)로 나누어서 정의됩니다.
- 사실 웹 개발자가 크게 신경쓸 것은 아니였다…..
viewport의 탄생
<body> <div style="width: 10%;">1231</div></body>
div 엘리먼트에서 width: 10%는 부모(위 코드에서는 body) 엘리먼트의 width에서 계산을 합니다.
그러면 body 엘리먼트의 크기는 어디서 가지고 올까요?
바로 부모인 html 엘리먼트에서 가지고 옵니다.
하지만 html 엘리먼트는 최상단 엘리먼트입니다.
그럼 누가 html 엘리먼트를 제한을 하는 것일까요?
이때 viewport가 html 엘리먼트의 width가 되며 브라우저 창의 크기를 말합니다.
모바일에서는 어떻게 동작할까?
모바일에서는 화면 크기가 작기 때문에 viewport 또한 작습니다.
예를 들어 모바일 viewport가 400px인 상태에서 width: 10%를 한다면 40px입니다.
이런 경우 너무 작아서 보기 힘듭니다.
그러기에 데스크탑 브라우저에서 사용하던 방식 그대로를 쓸 수 없지만
viewport를 넓힌다면 이 문제를 해결할 수 있습니다.
모바일에서는 visual viewport와 layout viewport로 나누어져 있습니다.
visual viewport는 모바일 스크린에서 보여지는 페이지의 일부분을 말합니다.
위의 스크린샷에 보면 layout viewport는 980px 이지만 visual viewport는 375px 입니다.
하지만 퍼센트 width와 같은 CSS는 layout viewport를 기준으로 계산합니다.
이렇게 하면 사이트 레이아웃이 데스크탑 브라우저와 동일하게 작동합니다.
layout viewport는 브라우저마다 다릅니다.
safari iPhone 980px, Opera 850px, Android Webkit 800px, IE 974px을 사용합니다.
많은 모바일 브라우저는 처음에는 페이지를 축소시켜서 visual viewport와 layout viewport가 동일하게 만듭니다.
Meta Viewport란?
<meta name="viewport" content="width=800>다시 처음으로 돌아와서 viewport는 정확하게 말하면 layout viewport의 크기를 조정하기 위한 것입니다.
만약 설정하지 않으면 모바일 화면은 layout viewport에 맞추어서 표시를 합니다.
화면을 확대를 해도 브라우저는 엘리먼트의 width를 유지하기 때문에 텍스트를 읽기 어렵습니다.
만약 html { width: 400px }로 하면 html 안에 있는 요소가 축소가 되기 때문에 확대할때는 잘 동작하는 것 처럼 보이지만 축소 페이지에서는 이전과 같은 문제가 발생합니다.
이를 해결하기 위해 Apple은 meta viewport를 만들었고 layout viewport를 설정할 수 있게 되었습니다.
visual viewport 크기는 어떻게 정해지나?
모바일 visual viewport는 CSS pixel ratio(devicePixelRatio)에 기반해서 정해집니다.
pixel ratio가 3.5는 디바이스의 물리적인 3.5 픽셀을 의미합니다.
그렇게 CSS가 1 pixel에 대응하게 됩니다.
예를 들어 Galaxy Note 8 1440 x 2960의 해상도를 갖습니다. devicePixelRation는 3.5 이기 떄문에 viewport는 414 x 846을 갖습니다.
