meta viewport(메타 뷰포트 태그) 사용법
얼마 전에 meta 태그 사용법이란 글을 썼는데
위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요.
힌트를 주신 admin 님께 감사합니다.^^
오늘 다룰 부분은 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 이해하기
'html' 카테고리의 다른 글
| IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge") (0) | 2015.01.16 |
|---|---|
| [html5] main 태그 (0) | 2015.01.14 |
| [html5] footer 태그 (0) | 2015.01.07 |
| [html5] aside 태그 (2) | 2015.01.06 |
| [html5] nav 태그 (4) | 2015.01.05 |
댓글