소개
스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다.
viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다.
viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다.
사용법
사용법은 의외로 간단합니다.
<meta name=’viewport” content=””/>를 head사이에 추가해 주면 됩니다.
content안에는 아래와 같은 내용이 들어갈 수 있습니다.
| 속성 | 값 | 초기값 | 특징 |
|---|---|---|---|
| width | <viewport-length>{1,2} | 독자적 속성에 따름. | device-width라는 값을 넣는 것이 가능하다. |
| height | <viewport-length>{1,2} | 독자적 속성에 따름 | device-height라는 값을 넣는 것이 가능하다. |
| user-scalable | no 또는 yes | yes | 사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의. |
| initial-scale | 1부터 10 | 1 | 초기 확대값 |
| minimum-scale | 0부터 10 | .25 | 최소 확소값 |
| initial-scale | 0부터 10 | 1.6 | 최대 확대값 |
p.s) <viewport-length> = auto | device-width | device-height | <length> | <percentage>
위의 table을 활용해서 만든 간단한 viewport예제입니다.
<meta name="viewport" content="initial-scale=1, width=device-width"/>
user-scalable속성은 되도록이면 yes를 유지하도록 하는 것이 좋습니다.
예전에 user-scalable속성을 아이폰에서 landscape모드가 되면 폰트가 커지는 문제로 no로 지정하는 경우가 많았는데,-webkit-text-size-adjust라는 CSS 속성을 사용하면 폰트 사이즈를 고정 하는 것이 가능합니다.
확대 축소는 사용성에 크게 영향을 미칠 수 있기 때문에 되도록이면 막는 것을 지양하는 것이 좋습니다.-webkit-text-size-adjust는 아래와 같이 사용할 수 있습니다.
body { -webkit-text-size-adjust : none } /* 폰트의 사이즈를 늘어나지 않도록 한다 */
body { -webkit-text-size-adjust : auto } /* 기존과 똑같이 작동하도록 한다 */
body { -webkit-text-size-adjust : 120% } /* 폰트를 기존 사이즈와 동일하게 한다 */
css-device-adaption
css-device-adaption라는 명세서가 있습니다.
viewport는 ‘표현’의 영역에 가깝기 때문에, W3C CSS WG에서는 viewport를 css-device-adapt명세에서 정의해주고 있습니다.
링크는 아래와 같습니다.
http://www.w3.org/TR/css-device-adapt
그럼 meta의 값에 있던 viewport를 어떻게 하면 CSS에서 표현하는 것이 가능할까요.
일단 지원하는 속성에 대한 테이블부터 살펴보겠습니다.
| Property | Values | Initial | Applies to | Inh. | Percentages | Media |
|---|---|---|---|---|---|---|
| width | <viewport-length>{1,2} | See individual properties | N/A | N/A | 독자 속성을 따름 | visual, continuous |
| height | <viewport-length>{1,2} | See individual properties | N/A | N/A | 독자 속성을 따름 | visual, continuous |
| min-width | <viewport-length> | auto | N/A | N/A | 초기 viewport의 width를 참조 | visual, continuous |
| max-width | <viewport-length> | auto | N/A | N/A | 초기 viewport의 width를 참조 | visual, continuous |
| min-height | <viewport-length> | auto | N/A | N/A | 초기 viewport의 height를 참조 | visual, continuous |
| max-height | <viewport-length> | auto | N/A | N/A | 초기 viewport의 height를 참조 | visual, continuous |
| zoom | auto | <number> | <percentage> | auto | N/A | N/A | 디바이스 별 확대량 | visual, continuous |
| user-zoom | zoom | fixed | zoom | N/A | N/A | N/A | visual, continuous |
| min-zoom | auto | <number> | <percentage> | auto | N/A | N/A | 디바이스별 확대량 | visual, continuous |
| max-zoom | auto | <number> | <percentage> | auto | N/A | N/A | 디바이스별 확대량 | visual, continuous |
| orientation | auto | portrait | landscape | auto | N/A | N/A | N/A | visual, continuous |
| resolution | auto | device | <resolution> | auto | N/A | N/A | N/A | visual, continuous |
위의 테이블은 현재 번역하지 않은 상태입니다.
대충 눈치 채신 분들도 있을 거라 생각합니다만, meta viewport에 있던 scale에 관련된 속성이 모두 사라졌습니다.
대신 그 속성들은 zoom이라는 속성이 대신 합니다.
그럼 위의 meta를 css로 수정해보겠습니다.
<meta name="viewport" content="initial-scale=1, width=device-width"/>
@viewport {
width : device-width;
}
initial-scale이 1인 경우 해당 값은 기본 값으로 반환되기 때문에 굳이 적어줄 필요가 없습니다.
외의 예제는 모두 명세에 올라와있으니 명세를 참고하시기 바랍니다.
마무리
스마트기기 상에서 웹페이지를 만들 때 당연히 쓰이고 있던 viewport지만 의외로 어려운 부분이 있습니다.
css-device-adaption 명세서를 살펴보며 조금 더 상세하게 이해할 수 있을 것이라 생각됩니다.