HTML - viewport 속성

viewport 속성은 스마트폰이나 테블릿과 같은 모바일 환경을 위한 속성입니다. PC 에서 보여지는 화면이 모바일에서 보여지는 화면과 많이 다르고, 컨텐츠 전체가 작게 보인다거나 너무 커 보이면 보기 힘들어집니다.

이럴 때 meta 정보에 viewport 를 정의합니다.

<meta> 뷰포트

속 성	설 명
width	기기의 가로 크기. 기본값: 980px auto | <백분율> | device-width 중 하나. 값이 device-width 이면 기기의 가로 폭에 자동으로 맞춤.
height	기기의 세로 크기; 기본값: auto auto | <백분율> | device-height 중 하나. 값이 device-height 이면 기기의 세로 폭에 자동으로 맞춤.
initial-scale	처음 페이지에 접속했을 때의 화면 확대 배율. 기본값: 1 0 ~10 사이의 값. 값이 클수록 확대된 화면을 보여줌.
user-scalable	사용자에 의한 확대, 축소 허용 여부. 기본값: yes yes | no 중 하나. no 이면 사용자가 확대, 축소할 수 없음.
minimum-scale	축소율 최소값. 기본값: 0.25 0 ~10 사이의 값. 기기에서 zoom out 할 때 화면을 줄일 수 있는 배율. 값이 0.5이면 실제 페이지의 50%까지 더 축소 가능함. 1이면 축소가 안됨.
maximum-scale	확대율 최대값. 기본값: 1.6 0 ~ 10 사이의 값. 기기에서 zoom in 할 때 화면을 키울 수 있는 배율. 값이 1.5이면 실제 페이지의 1.5배까지 확대가 가능함. 1이면 확대가 안됨.

형식은 다음과 같습니다.

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

<meta name="viewport" content="width=600, height=900"/>

<meta name="viewport" content="width=device-width, 
            minimum-scale=0.8, maximum-scale=3, user-scalable=no"/>

CSS 뷰포트

스타일시트에서 사용할 수 있는 속성은 다음 표를 사용할 수 있으며, 이 방식은 웹표준으로 정의되어 있습니다.

속 성	설 명
width	의 width 와 동일. <고정 값> | <최소값, 최대값> 중 하나의 형식
height	의 height 와 동일. <고정 값> | <최소값, 최대값> 중 하나의 형식
zoom	initial-scale 과 동일. auto | <길이> | <백분율> 중 하나.
user-zoom	user-scalable 과 동일 zoom | fixed 중 하나. fixed 이면 확대, 축소할 수 없음.
min-zoom	minimum-scale 과 동일.
max-zoom	maximum-scale 과 동일.
orientation	장치를 기울일 때 방향이 변경되는 장치의 경우 방향이 변경되는 것을 제어함. auto: 자동 portrait: 세로 방향에서만 표시함. Landscape: 가로 방향에서만 표시함.

<style>
@viewport {
  width: 300px 960px;
  height: device-height;
  min-zoom: 1;
  max-zoom: 1;
  user-zoom: fixed;
}
</style>

<style>
@viewport {
    width: 600px auto;
    min-zoom: 0.25;
    max-zoom: 5;
}
</style>