1. 개념 정의
meta viewport 태그는 애플이 아이폰, 아이패드에서 브라우저의 뷰포트 크기 조절을 위해 제작하였다.
meta viewport는 W3C 명세에는 없어서 표준은 아니지만
safari가 널리 사용되면서 다른 브라우저들도 이 태그를 채택하게 된다.
IE10은 viewport의 크기 조절을 위해
표준으로 제안된 @viewport rule을 사용한다.
따라서 아이폰과 IE10 브라우저 모두에서 작동하는 웹페이지를 제작하려면
2가지 방식으로 viewport 크기를 조절하는 것이 필요하다.
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
2. 사용법
1) 너비를 장치너비로 설정
<meta name="viewport" content="width=device-width" />
2) 너비를 장치높이로 설정
<meta name="viewport" content="height=device-width" />
3) viewport 너비 설정
<meta name="viewport" content="width=500" />너비는 px 단위, meta 태그는에서는 단위 생략
content에 여러 속성값 쓸 경우 쉼표로 분리
4) 초기 화면 배율(initial-scale) 설정
<meta name="viewport" content="width=device-width, initail-scale=1.0" />1.0은 100%와 동일.
5) 최소 최대 화면 배율 설정
<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0" />최소 설정은 사용자가 너무 극단적으로 화면을 축소하는 것을 방지함
<meta name="viewport" content="width=device-width, inital-scale=1.0, minimum-scale=1.0, maxinum-scale=3.0" /> " />최대 화면 배율 설정은 극단적으로 화면 확대하는 것을 방지함
6) 사용자가 크기 조절하기를 원치 않을 때
<meta name="viewport" content="user-scalable=no, width=device-width">