[Mobile] Viewport 이해하기

2012. 1. 19. 00:46

viewport란?

모바일 브라우저 중 webkit을 기반으로 한 녀석들은 PC의 브라우저 윈도우에

해당하는 Viewport라는 녀석이 있습니다.

기본적인 뷰포트의 넓이는 980px로 설정되어 있어서, 폰에서 보여질 컨텐츠를 500px로

만들었다면 480px의 여백이 생기도 페이지의 넓이는 980px이 됩니다.

정리하자면 아이폰의 경우 320 x 480px 의 화면사이즈를 가지기 때문에 980px과 비교하면

PC화면의 약 1/3의 크기로 보이게 됩니다.

viewport설정방법

viewport를 설정하려면 head에 meata태그를 추가하면 됩니다.

viewport속성값

속성	내용	단위	기본값	허용범위	특이사항
width	viewport의 넓이	px	980px	200 ~ 10,000	뷰 포트의 픽셀 가로 길이를 지정. 가로 길이를 지정하지 않으면 데스크탑 사이즈로 지정. (모바일 사파리의 경우는 980픽셀로 지정됨.)device-width로 지정가능
height	viewport의 높이	px	가로화면비율에서 계산된 값	200 ~ 10,000	뷰 포트의 픽셀 세로 길이를 지정. 일반적으로, 이 속성에 대한 지정은 하지 않아도 무관 함. device-height로 지정가능
initial-scale	초기 배율값	승수지정 120% = 1.2	viewport에서 계산된 값	0 ~ 10	처음 모바일 페이지가 보여질 때 페이지 배율을 지정. (0~10.0) (1.0으로 설정하는 것이 안정적임.) 값이 크면 확대, 값이 작으면 축소
minimum-scale	승수 지정	승수	.25	0 ~ 10	사용자가 축소할 수 있는 최소 배율을 지정. (0~10.0) 모바일 사파리는 기본으로 0.25로 설정.
maximum-scale	승수 지정	승수	1.6	0 ~ 10	사용자가 확대할 수 있는 최대 배율을 지정. (0~10.0) 모바일 사파리는 기본으로 1.6으로 설정.
user-scalable	확대,축소 지원여부	yes, no	yes		사용자가 배율을 확대 또는 축소 허용 여부를 설정. 모바일 사파리는 기본으로 '사용 함'으로 설정.