뷰포트 (viewport)

viewport는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 합니다.

 

예시)

<meta name="viewport" 
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

위 메타 태그는 반응형 웹을 제작할 때 사용하는 뷰포트의 기본 형태입니다. 뷰포트 기술을 제대로 사용하려면 문법을 정확하게 이해하고 있어야 하며,, 그중에서도 특히 뷰포트 속성은 반드시 알아야 합니다.

 

 

뷰포트 속성

속성명	속성값	속성 설명
width	Device-width, 양수	뷰포트의 너비를 지정합니다.
height	Device-height, 양수	뷰포트의 높이를 지정합니다.
Initial-scale	양수	뷰포트의 초기배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하면 축소된 페이지를 표시 1보다 큰 값을 사용하면 확대된 페이지를 표시
User-scalable	Yes, no	뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes입니다. 반대로 no로 설정하면 사용자가 페이지를 확대할 수 없습니다.
Minimum-scale	양수	뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25입니다.
Maximum-scale	양수	뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0입니다.

 

뷰포트 영역 확인하기

데스크 톱에서 뷰포트 영역 확인하기

데스크톱의 뷰포트 영역을 확인하려면 크롬 웹 브라우저가 필요합니다. 크롬 브라우저에는 웹 문서를 검사할 수 있는 ‘검사’‘검사’ 도구가 기본적으로 탑재되어 있습니다. 크롬을 실행한 다음 검사 기능의 단축키인 'F12'버튼을 눌러줍니다.

화면 우측에 창이 하나 나타납니다. 그리고 브라우저 창의 크기를 조절해 보면 오른쪽 상단에 뷰포트 영역이 나오는 것을 확인할 수 있습니다.

 

스마트 기기의 뷰포트 영역 확인하기

웹 브라우저에는 웹 문서를 검사할 수 있는 요소 검사 도구가 기본적으로 탑재되어 있지만 스마트 기기는 뷰포트 영역을 확인할 수 있는 기능이 없습니다. 그렇기 때문에 뷰포트 영역을 확인할 목적으로 개발된 웹사이트에 접속해서 뷰포트 영역을 확인해야 합니다.