meta viewport(메타 뷰포트 태그) 사용법
웹페이지 소스�� 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요.
<meta name="viewport" content="width=device-width">
meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모���일 브라우저의
뷰포트(viewport) 크�� 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조)
meta viewport 태그는 W3C 명세에는 없������,(따라서 표���이 아님)
iOS 장치(아이폰 운영체제 브라우저 safari)가 널리 사용됨에 따라 사실상 표������럼
사용되��� 있���, 다�� 브라우저들(Opera, Android, Mobile firefox(Fennec) 등)도 이 태그�� 채택하��� 됩니다.
그런데, IE10(snap mode) 은 뷰포트 크�� 조절을 위해 meta viewport 태그 대신에 표���으로 제안된
@viewport rule을 사용합니다.
@viewport는 W3C에 제안된 표���이고, Opera Mobile 11에서도 지원합니다.
그럼에도 여전히 viewport meta 설정을 고수하는 브라우저들이 있습니다.
따라서 아이폰�� IE10 브라우저 양쪽을 타���으로 웹페이지를 설계하려�� 현재는 두 가��� 방식으로
viewport 크�� 조절 하는 것이 필요합니다.
예
<meta name='viewport' content='width=device-width' />
<style type='text/css'>
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
</head>
이 페이지에서는 viewport란 무엇인고, 왜 필요한��� 알아보고, meta viewport 태그 사용법을 다루���습니다.
css @viewport rule은 다음 시���에 다루어 볼���요
viewort란?
viewport란 우리������ 보임창, 즉 화면 상의 화상 표시 영역을 뜻합니다.
데스크탑(pc)의 뷰포트와 모���일 뷰포트는 약간 다릅니다.
- 데스크탑(pc)의 뷰포트는 웹브라우저 ��(visible area)의 뷰포트와 같음.
사용자��� 브라우저 창의 크기를 조절하면서 뷰포트 크기를 조절할 수 있음.
웹페이지��� 뷰포트보다 작으��, 스크롤��� 나머지를 �� 수 있음.
이미��� 출���: 애플
- 모���일 뷰포트는 웹브라우저 ��(visible area)보다 크거나 작을 수 있음.
그리고 ��, 스크롤���, 크기조절 버튼이 없음.
대신, 상하���우로 움���이거나, 더���탭이나, 확대 축소(zoom in/out)�� 통해 뷰포트 배율을 바��� 수 있음.(크기��� 아니라)
뷰포트 980px
이미��� 출���: 애플
viewport 크�� 조절이 필요한 이유?
데스크탑에 기���하여 설계된 웹페이지를 모���일에서 보면 기본 뷰포트가 980px이�� 때문에
내용이 작��� 보입니다. (위 이미���'뷰포트 980' 참조)
뷰포트 설정을 하���되면 다양한 모���일 기기에서도 페이지의 너���나 화면 배율을 설정할 수 있습니다.
모���일 장치에 최적화된 웹페이지를 만들려�� html 문서 head에 뷰포트 설정을 포함해야 합니다.
뷰포트 너��� 320로 설정한 화면
meta viewport 태그 사용법 (간단 설명)
간단 설명과 �� 설명으로 구���했어요. 필요하신 부���을 골라서 보세요
1. viewport 너��� 설정
<meta name="viewport" content="width=500">
너���는 px 단위이�� meta 태그에서는 단위 생략함
content에 여러 속성값을 쓸 경우 쉼표��� 분리함.
2. 너���를 장치너������ 설정(추���)
<meta name="viewport" content="width=device-width">
브라우저 너���를 장치 너���에 맞���어 표시함.
3. 너���를 장치높이로 설정
<meta name="viewport" content="height=device-height">
4. 초기 화면 배율(initial-scale) 설정(zoom 레벨 설정)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.0은 100%와 같음. initial-scale은 �� 설명 참조
5. 최소 최대 화면 배율 설정(minimum and maximum scale)
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
최소 설정은 사용자��� 너무 극닥적으로 화면 축소하는 것을 방���함
(위 예에서는 초기값과 최소 화면 배율 설정을 같이 함)
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
최대 화면 배율 설정은 극단적으로 화면 확대하는 것을 방���함.
(위 예는 최소와 최대 배율을 같이 사용한 예)
(minimum-scale, maximum-scale값은 �� 설명 참조)
6. 사용자��� 크�� 조절하기�� 원��� 않을 때
<meta name = "viewport" content = "user-scalable=no, width=device-width">
meta viewport 태그 사용법 (�� 설명)
(Safari Developer Library 사이트�� 번역 정리한 것입니다)
1. viewport
iOS(아이폰 운영체제)에서 페이지를 표시할 때 사용하며, �� 크기를 바���
▷구문
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
▷설명
보통 viewport meta 태그는, 뷰포트의 너���와 초기 배율(zoom 레벨)을 설정하기 위해 사용.
예> 웹 페이지��� 980px보다 폭이 좁으��, 뷰포트의 너���를 내용에 알���도��� 설정해야 함.
iOS에 기���한 웹을 디자인하려��, width�� device width로 설정해야 함.
하기 표 1은, viewport meta key와 그들의 기본값에 의해 지원되는 속성을 서술함.
여러 개의 속성을 쓰려�� 쉼표��� 구���된 목���을 사용 함.
여러 개의 속성을 설정할 때 다음 규���을 따른다.
- 세미������(;)을 구��� 문자��� 사용하��� 말 것
- 공백은 구��� 문자��� 작동할 수 있������, 쉼표를 추���함.
- 숫자 속성으로, 값이 숫자��� 아닌 문자를 포함하������ 숫자��� 시작되면, 숫자 접두어는 속성값으로 사용된다.
예> 1.0x는 1.0�� 같음. 123x456은 123�� 같음. 매������수��� 숫자��� 시작하��� 않으�� 값은 0임.
장치의 치수(dimension)을 참조할 때, 숫자 값 대신 표 2에 사용된 항수를 사용해야 함
예> width 320 대신 device-width, height 480 대신 device-height 사용(세로 화면에서)
모든 viewport 속성을 일일이 설정할 필요 없음.
일부 값이 설정되기 만하면 iOS 사파리는 다�� 값을 추���한다.
예> scale 1.0으로 설정하면 사파리는 뷰포트 너���를 세로화면에서 device-width로 가정하���,
가��� 화면에서 device-height 로 가정함.
width 980px�� initial scale 1.0으로 원하면, 둘을 모두 설정해야 한다.
예> width�� device-width로 설정하기
<meta name = "viewport" content = "width = device-width">
초기 화면 배율 1.0으로 설정하기
<meta name = "viewport" content = "initial-scale = 1.0">
초기 화면 배율 설정하��� 크�� 조절을 사용하��� 않��� 하기
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
표 1
| 속성값 | 설명 |
| width | 뷰포트의 너���(px). 기본값 : 980 범위 : 200~10,000 px 속성값은 표2처럼 항수(예:device-width) 로 설정할 수도 있음. ---------------------------------- |
| height | 뷰포트의 높이(px) 기본값 : width 속성값과 장치 영상의 가��� 세로 비에 기���하여 계산됨. 범위 : 223~10,000 px 속성값은 표2처럼 항수��� 설정할 수도 있음. ---------------------------------- |
| initial-scale | 뷰포트의 초기 배율(곱하는 수) 기본값 : 보이는 영역에서 웹페이지에 맞���기 위해 계산됨 범위 : minimum-scale�� maximum-scale 속성값으로 결정됨 ---------------------------------- |
| minimum-scale | 뷰포트의 최소 배율값 기본값 : 0.25 범위 : 0~ 10.0 ---------------------------------- |
| maximum-scale | 뷰포트의 최대 배율값 기본값 : 5.0 범위 : 0~ 10.0 ---------------------------------- |
| user-scalable | 사용자��� 화면을 축소/확대(zoom in/out)) 할 수 있는��� 여부를 결정 |
표 2
| 속성값 | 설명 |
| device-width | 장치 너���(px) |
| device-height | 장치 높이(px) |
*meta 태그에서 px은 생략함
2. apple-mobile-web-app-capable
웹응용프���그램을 전체 화면에서 작동시킬지를 설정
▷구문
<meta name="apple-mobile-web-app-capable" content="yes">
▷설명
content가 yes��, 전체화면 모드��� 작동함. no�� 작동하��� 않음.
기본값은 Safari가 웹 내용을 표시하도��� 사용하는 것.
웹페이지��� window.navigator.standalone (읽�� 전용 Boolean 자���스크립트 속성)을 사용하여
전체 화면 모드��� 표시할��� 결정할 수 있음.
3. apple-mobile-web-app-status-bar-style
웹 응용프���그램을 위한 상태 막대의 스타일 설정
▷구문
<meta name="apple-mobile-web-app-status-bar-style" content="black">
▷설명
apple-mobile-web-app-capable에 서술한 것���럼 전체화면 모드를 먼저
지정하��� 않으�� 효과��� 없음.
content가 default이��, 상태 막대는 보통으로 나타남.(기본값)
black으로 설정하면, 상태 막대는 검은색 배경임.
black-translucent 이�� 상태��� 막대는 검정과 반투명
*default 또는 black으로 설정하면 웹 내용은 상태 막대 아래 표시됨.
*black-translucent로 설정하면, 웹 내용이 전체 화면에 표시됨,
일부는 상태 막대��� 인해 흐릿해짐.
4. format-detection
iOS safari 웹페이지에서 가능한 전화���호의 자동 탐색이 가능하거나 불���능하��� 설정
▷구문
<meta name="format-detection" content="telephone=no">
▷설명
기본적으로 iOS safari는 전화���호처럼 형식화된 어느 문자열이든 감���하여
전화��� 호출하는 링크�� 만듦.
telephone=no 라고 지정하면 이 특정을 불���능하��� 함.
<같이 참조하면 좋은 글>
▣ http://www.quirksmode.org/mobile/metaviewport/ 에서 ideal viewport �� 보면, 모���일 브라우저���
이상적인 뷰포트가 나옵니다.
▣ https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193-SW8
▣ http://benfrain.com/understanding-the-viewport-meta-tag-and-css-viewport/
[css] 미디어 쿼리, @media query 이해하기
출���: http://aboooks.tistory.com/352 [지구별 안내서]
