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.2 |
viewport에서 계산된 값 |
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">