[반응형 웹 디자인]뷰포트 이해하기.

뷰포트메타태그

뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다.

아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값이 980픽셀이 아닌 

모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다.

<meta name="viewport" content="width=device-width, inital-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입니다.

뷰포트 영역 확인하기

뷰포트 영역을 확인하는 방법은 두 가지가 있씁니다.

1. 크롬 브라우저의 '요소 검사' 도구를 사용해서 확인하는 방법.

2. 뷰포트 영역을 확인할 목적으로 개발된 웹사이트에 접속해서 확인하는 방법

각각의 방식은 테스트하고자 하는 기기에 따라 선택의 길이 달라짐. 데스크톱의 경우에는 크롬 브라우저의 '요소 검사' 도구를 사용하면 됨.

하지만, 스마트 기기의 웹 브라우저는 '요소 검사' 와 같은 별도의 도구가 없기 때문에, 뷰포트 영역 확인 사이트를 이용해야 함.

2번 방법

http://dnsdk300.dothome.co.kr/viewport/ 에 들어가면 

해당 디스플레이의 뷰포트 영역을 표시해줍니다. 스마트 기기를 이용할 때 2번 방법을 사용합니다.