About viewport

컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역이다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(메뉴바, 탭등을 제외한 순수 화면 영역)을 뜻한다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않는다.

 

viewport는 두 가지로 나뉜다.

 

• visual viewport: 사용자의 디스플레이 장치에서 현재 볼 수 있는 부분이다. (사용자가 확대/축소 수준을 조정할 때 계속 변화)
• layout viewport: 레이아웃 뷰포트는 사용자가 확대/축소 수준을 조정할 때 동일하게 유지된다.

 

HTML5에서 소개된 뷰포트 <meta> 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

•  width=device-width: viewport의 width를 장치의 스크린의 width로 설정.
•  initial-scale=1.0: 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 지정.