[모바일 웹] 모바일 웹(앱) 뷰포트(Viewport) 설정하기

 일반적으로 모바일 브라우져에서 URL주소를 입력하고, 사이트에 접근해보면 페이지 전체가 축소되어 보여질 것이다. 이것은 페이지의 내용이 스크린 사이즈보다 클 경우를 대비해서 브라우저가 자동으로 축소모드로 랜더링하기 때문이다. <meta>태그를 사용하면 페이지의 초기 비율과 최대/최소 비율, 그리고 사용자에 의한 스케일 조정 여부등을 설정할 수 있다.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no” />

위 예제와 같이 메타(meta)태그의 이름(name)에 뷰포트(viewport)라고 지정되어 있으면 이는 스케일을 인식한다. 그리고 content라는 속성에 스케일링에 대한 내용을 기술하면 되다. Content속성 기술 할 수 있는 주요 내용은 아래와 같다.

Initial-scale	페이지가 처음 로딩될 때의 화면 확대 비율
Maximum-scale	최대 확대 비율 (0~1.0)
Minimum-scale	최대 축소 비율 (0~1.0)
User-scaleable	사용자가 줌으로 확대나 축소에 대한 가능여부 (yes,no)
width	너비(필셀) (device-width 디바이스 너비)
height	높이(필셀) (device-height 디바이스 너비)

(참고 비율 1.0은 100%를 의미한다.)