모바일 화면을 위해 viewport meta tag (뷰포트 메타 태그) 사용하기

뷰포트 기본

모바일로 최적화된 사이트는 일반적으로 다음과 같은 태그를 포함합니다.

<meta name="viewport" content="width=device-width, user-scalable=no">

width 속성은 뷰포트의 크기를 조정합니다. 특정한 숫자를 사용해 width=600라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있는데, device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다. (뷰포트의 높이에 따라 크기와 위치가 변하는 요소들로 이루어진 페이지의 경우 상응하는 height와 device-height 값들이 유용하게 사용될 수 있습니다.)

initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정합니다. maximum-scale, minimum-scale, 그리고 user-scalable 속성들은 사용자가 얼마나 페이지를 줌-인, 줌-아우트 할 수 있는지를 조정합니다.