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>

0 댓글