본문 바로가기

Web Layouts

(HTML) <meta name="viewport" content=

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">