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

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

뷰포트, viewport

1 속성

다음과 속성들이 있다.

width (너비)

width=device-width

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

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

initial-sacle=1.0

→ 초기 배율을 1.0으로 설정

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

user-scalable=no

→ 확대축소 불가

2 뷰포트 기초예제

<!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>

3 아이폰 화면 크기

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

아이폰: 320 x 480 px

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

@@ 1번째 줄: / 1번째 줄: @@
 *뷰포트, viewport
+==속성==
+다음과 속성들이 있다.
+*width (너비)
+<source lang='html5'>
+width=device-width
+</source>
+→ 기기 크기에 맞춤. 아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
+*height (높이)
+*initial-scale (초기 배율)
+<source lang='html5'>
+initial-sacle=1.0
+</source>
+→ 초기 배율을 1.0으로 설정
+*minimum-scale (최소 배율)
+*maximum-scale (최대 배율)
+*user-scalable (확대축소 가능여부)
+<source lang='html5'>
+user-scalable=no
+</source>
+→ 확대축소 불가
 ==뷰포트 기초예제==
@@ 15번째 줄: / 36번째 줄: @@
 </html>
 </source>
-*width=device-width
-:기기 크기에 맞춤
-:아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
-*initial-sacle=1.0
-:초기 배율을 1.0으로 설정
-*user-scalable=no
-:확대축소 불가
 ==아이폰 화면 크기==
@@ 30번째 줄: / 44번째 줄: @@
 *URL Bar 높이: 60px
 *Button Bar 높이: 44px
-==속성==
-*width
-*height
-*initial-scale
-*minimum-scale
-*maximum-scale
-*user-scalable
 [[분류:HTML5]]
 [[분류:모바일 웹]]