HTML Viewport 설정

viewport

viewport는 웹 컨텐츠를 볼 수 있는 창 영역입니다.
좁은 화면 장치 (예 : 휴대폰)는 화면보다 일반적으로 넓은 가상 창이나 뷰포트에 페이지를 렌더링 한 다음 렌더링 된 결과를 모두 축소하여 한 번에 볼 수 있습니다.
그런 다음 사용자는 이동하고 확대 / 축소하여 페이지의 다른 영역을 볼 수 있습니다.
예를 들어 모바일 화면의 너비가 640px 인 경우 페이지는 가상 뷰포트가 980px로 렌더링 된 다음 640px 공간에 맞게 축소됩니다.

대부분의 페이지는 모바일에 최적화되어 있지 않으므로 작은 뷰포트 너비에서 렌더링 할 때 깨지거나 (또는 ​​불량하게 보입니다) 수행됩니다.
이 가상 뷰포트는 좁은 화면 장치에서 일반적으로 모바일에 최적화되지 않은 사이트를 더 잘 보이도록 만드는 방법입니다.

viewport 설정

html에 아래 meta태그를 추가하면 됩니다.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • content=width=device-width : 컨텐츠를 디바이스 가로 사이즈에 맞춰 표현한다고 선언
  • initial-scale=1.0 : 초기 표시 배율 (1.0이 기본, 꽉찬 페이지)
  • maximum-scale=1.0 : 최대 확대 비율 ( 기본값 5.0 범위 0~10.0)
  • minimum-scale=0.25 : 최소 확대 비율 ( 기본값 5.0 범위 0~10.0)
  • user-scalable=no : 확대/축소 설정 (기본값 yes)

References