최근 바뀜 사이트맵

사이트 도구

뷰포트_viewport

뷰포트(Viewport)

용도

웹브라우저의 가상 해상도를 설정하여 다양한 크기의 웹페이지를 모바일 기기의 작은 스크린에서도 꽉 차게 보여준다.

예를 들어 아이폰, 아이패드는 웹페이지를 화면에 표시할 때 무조건 980픽셀을 기준으로 콘텐트를 보여준다. 만일 웹페이지의 가로 폭이 1500픽셀이라면 아이폰의 스크린에 넘칠 것이고, 폭이 300픽셀이라면 너무 조그마하게 보일 것이다. 뷰포트를 설정하면 300픽셀, 1500픽셀의 웹페이지도 아이폰의 스크린에 꽉 차게 보여줄 수 있다.

종류

<meta name="viewport">

애플이 아이폰, 아이패드 등의 모바일 브라우저의 뷰포트 크기 조절을 위해 만들었다. 따라서 W3C 명세에는 없는 비표준 태그이다. 하지만 iOS 장치가 널리 사용되면서 사실상 표준처럼 사용되고 있다. 지금은 대부분의 모바일 브라우저가 이 태그를 지원한다.

사용 방법

헤더에 다음과 같이 선언한다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no , target-densitydpi=medium-dpi">
 
<meta name="viewport"
content="
width=[가상해상도],
initial-scale=[초기 확대 축소 비율],
maximum-scale=[최대 확대 비율],
minimum-scale=[최소 축소 비율],
user-scalable=[사용자에 의한 확대 축소 허용 여부]
target-densitydpi=[기긱의 실제 해상도]
"
/>

속성

PropertyForUnitInitialValue기타
widthViewport넓이px980px<viewport-length>{1,2}「device-width*」 를 값으로 지정 가능
heightViewport높이px넓이와 지정된 비율에 의해 계산된 값<viewport-length>{1,2}「device-height*」를 값으로 지정 가능
initial-scale배율의 초기값곱수로 지정(예:120%의 경우1.2표시단위에서 계산되는 값minimum-scale~maximum-scale
minimum-scale배율의 최소값곱수로 지정0.250~10
maximum-scale배율의 최대값곱수로 지정1.60~10
user-scalable확대,축소의 가능여부 yesyes,nono(확대,축소불가)를 지정할 경우 글자를 입력할때 스크롤도 불가능해짐

* <viewport-length> = auto | device-width | device-height | <length> | <percentage>

  • device-width : 장치 너비(px)에 자동 맞춤
  • device-height : 장치 높이(px)에 자동 맞춤

예를 들면 아래와 같이 지정하면 '뷰포트를 디바이스의 폭에 맞추고, 초기 배율은 1, 최대 확대 배율은 1, 최소 축소 배율은 1, 확대 축소 허용은 하지 않는다.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no>

@viewport rule

뷰포트 메타 태그는 iOS 장치를 위해 고안된 비표준 메타 태그이므로, 이를 표준화하기 위해 W3C에 제안되었고, 현재 정식 표준은 아닌 초안 단계에서 표준화가 시도되고 있다. 1) 표준으로 정식 채택되면 뷰포트 메타 태그는 점차 폐기될 것으로 보인다.

사용 방법

CSS에 아래와 같이 선언한다. 2)

IE10과 Oprera11 이후 버전에서 지원하며 각각 업체별 접두어(prefix), -ms-, -o-를 붙여야 한다. @-ms-viewport는 width, height 두 가지 속성만 지원한다.

<style type='text/css'> 
@-ms-viewport { width: device-width; } 
@-o-viewport { width: device-width; } 
@viewport { width: device-width; } 
</style> 

속성

PropertyForUnitInitialValue기타
widthViewport넓이pxSee individual descriptors<viewport-length>{1,2}extend-to-zoom를 값으로 지정 가능
heightViewport높이pxSee individual descriptors<viewport-length>{1,2}extend-to-zoom를 값으로 지정 가능
zoom배율의 초기값곱수로 지정autoauto,<number>, <percentage>.
max-zoom배율의 최대값곱수로 지정autoauto,<number>,<percentage>.
min-zoom배율의 최소값곱수로 지정autoauto,<number>,<percentage>.
user-zoom확대,축소의 가능여부 zoomzoom,fixed
orientation디스플레이의 가로/세로 모드 autoauto,portrait,landscape

예시

<meta name=“viewport”>는 다음과 같은 @viewport로 변환이 가능하다.

<meta name="viewport" content="width=device-width, height=device-width, initial-scale=2.0, user-scalable=1">
@viewport {
    width: extend-to-zoom;
    height: extend-to-zoom 100%;
    zoom: 2.0;
    user-zoom: zoom;
}
2)
뷰포트 메타 태그와 달리 CSS에 선언하는 것은 '구조와 표현의 분리'(Separation of Structure and Presentation)라는 HTML5와 CSS3의 중심 개념에 따른 것이다.
뷰포트_viewport.txt · 마지막으로 수정됨: 2018/07/01 14:45 저자 baobab