viewport

소개

스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다.
viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다.
viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다.

사용법

사용법은 의외로 간단합니다.
<meta name=’viewport” content=””/>를 head사이에 추가해 주면 됩니다.
content안에는 아래와 같은 내용이 들어갈 수 있습니다.

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에서 표현하는 것이 가능할까요.
일단 지원하는 속성에 대한 테이블부터 살펴보겠습니다.

위의 테이블은 현재 번역하지 않은 상태입니다.
대충 눈치 채신 분들도 있을 거라 생각합니다만, 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 명세서를 살펴보며 조금 더 상세하게 이해할 수 있을 것이라 생각됩니다.
이 글은 css-device-adaption 문서가 변경될 때 매 번 업데이트 할 예정입니다.