"뷰포트"의 두 판 사이의 차이

2012년 4월 15일 (일) 11:50 판

뷰포트, viewport

1 뷰포트 기초예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
<title>제목</title>
</head>
<body>
<p>내용</p>
</body>
</html>

→ 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0

2 속성

다음과 속성들이 있다.

width	너비 (단위: px)	200~10000. 또는 device-width
height	높이 (단위: px)	223~10000. 또는 device-height
initial-scale	초기 배율
minimum-scale	최소 배율	0.0 ~ 10.0 (기본값 0.25)
maximum-scale	최대 배율	0.0 ~ 10.0
user-scalable	확대/축소 가능 여부	yes 또는 no

width (너비)

width=device-width

→ 기기 크기에 맞춤. 아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.

height (높이)
initial-scale (초기 배율)

initial-sacle=1.0

→ 초기 배율을 1.0으로 설정

minimum-scale (최소 배율)
maximum-scale (최대 배율)
user-scalable (확대축소 가능여부)

user-scalable=no

→ 확대축소 불가

3 아이폰 화면 크기

스마트폰 화면 크기 문서를 참고하십시오.

아이폰: 320 x 480 px

Status Bar 높이: 20px
URL Bar 높이: 60px
Button Bar 높이: 44px

@@ 19번째 줄: / 19번째 줄: @@
 ==속성==
 다음과 속성들이 있다.
+{| class='wikitable'
+|-
+!width
+|너비 (단위: px)
+|200~10000. 또는 device-width
+|-
+!height
+|높이 (단위: px)
+|223~10000. 또는 device-height
+|-
+!initial-scale
+|초기 배율
+|
+|-
+!minimum-scale
+|최소 배율
+|0.0 ~ 10.0 (기본값 0.25)
+|-
+!maximum-scale
+|최대 배율
+|0.0 ~ 10.0
+|-
+!user-scalable
+|확대/축소 가능 여부
+|yes 또는 no
+|}
 *width (너비)
 <source lang='html5'>