원문 주소 : http://chaospace.tistory.com/152
viewport란?
모바일 브라우저 중 webkit을 기반으로 한 녀석들은 PC의 브라우저 윈도우에해당하는 Viewport라는 녀석이 있습니다.기본적인 뷰포트의 넓이는 980px로 설정되어 있어서, 폰에서 보여질 컨텐츠를 500px로만들었다면 480px의 여백이 생기도 페이지의 넓이는 980px이 됩니다.정리하자면 아이폰의 경우 320 x 480px 의 화면사이즈를 가지기 때문에 980px과 비교하면PC화면의 약 1/3의 크기로 보이게 됩니다.viewport설정방법
viewport를 설정하려면 head에 meata태그를 추가하면 됩니다.<meta name="viewport" content="속성값">viewport속성값
속성 내용 단위 기본값 허용범위 특이사항 width viewport의 넓이 px 980px 200 ~ 10,000 device-width로 지정가능 height viewport의 높이 px 가로화면비율에서
계산된 값200 ~ 10,000 device-height로 지정가능 initial-scale 초기 배율값 승수지정
120%
= 1.2viewport에서
계산된 값0 ~ 10 minimum-scale 승수 지정 승수 .25 0 ~ 10 maximum-scale 승수 지정 승수 1.6 0 ~ 10 user-scalable 확대,축소 지원여부 yes, no yes
viewport의 넓이를 400px하고 시작 비율을 2로 적용한 코드;<meta name="viewport" content="width=400px, initial-scale=2">
viewport의 확대축소를 지원하고 싶지 않을 경우 :<meta name="viewport" content="width=400px, user-scalable=no, initial-scale=2">
실습하기
시작시 content의 크기를 2.3배로 보이게 하는 코드 :<meta name="viewport" content="width=320px, initial-scale=2.3">x
결과 ( 웹 브라우저는 viewport가 무시됨 )
user-scalable을 이용해 content스케일 조절을 막은 코드 :<meta name="viewport" content="width=320px, user-scalable=no, initial-scale=1">
결과화면 :
참고 사이트 :