웹사이트는 사용자가 접속하는 디바이스의 종류에 따라 화면의 크기가 달라진다. 뷰포트란 이때 웹페이지가 사용자에게 보여지는 영역을 말한다. PC의 경우에는 브라우저의 창 크기를 조절하여 뷰포트의 크기를 바꿀 수 있지만 태블릿이나 핸드폰은 브라우저의 크기를 변경할 수 없다. 그래서 PC 전용으로 만들어진 웹페이지를 핸드폰 등 화면이 작은 디바이스에서 보면 한 화면에 다 보이지 않게 된다. 그래서 모바일 웹브라우저가 취하는 기본 정책은 모든 컨텐츠를 다 보여기주기 위해 화면을 줄이는 것이다. 하지만 이럴 경우 글자가 너무 작아져서 보기 어렵게 된다.
HTML5에서 소개된 태그의 뷰포트를 사용하면, 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있고 줌 영역도 조정할 수 있다. 반응형 웹을 만들 때 고려되는 사항이다.
기본값은 다음과 같다.
width=device-width : 페이지 너비(렌더링 영역)를 기기의 스크린 너비로 설정한다.
initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용한다. 0~10 사이의 값을 가진다.
그 밖에 다음과 같은 값을 지정할 수 있다.
minimum-scale: 줄일 수 있는 최소 크기 지정. 0~10 사이의 값
maximum-scale: 늘릴 수 있는 최대 크기 지정. 0~10 사이의 값
user-scalable: 사용자가 화면을 확대/축소할 수 있는지 지정. yes 또는 no의 값
- user-scalable=no 를 사용하면 저시력과 같이 시각 장애를 가진 사용자에게 웹 접근성 문제를 일으킬 수 있다.
뷰포트를 기준으로 한 단위는 다음과 같다.
vw(viewport width): 뷰포트 너비에 근거한다. 뷰포트 width의 1%와 동일하다.
vh(viewport height): 뷰포트 높이에 근거한다. 뷰포트 height의 1%와 동일하다.
vmin(viewport minimum): 뷰포트의 높이와 너비 중 작은 수치에 근거한다. 둘 중 작은 수치의 1%와 동일하다.
vmax(viewport maximum): 뷰포트의 높이와 너비 중 큰 수차에 근거한다. 둘 중 큰 수치의 1%와 동일하다.
% 단위는 부모요소에 의해 결정된다면, viwport 단위는 부모와 상관없이 viewport에 의해 결정된다.
