(→속성) |
Jmnote bot (토론 | 기여) 잔글 (봇: 자동으로 텍스트 교체 (-<source +<syntaxhighlight , -</source> +</syntaxhighlight>)) |
||
| (사용자 2명의 중간 판 9개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
* | ==개요== | ||
;viewport | |||
;뷰포트 | |||
*웹페이지에서 실제 사용자가 볼 수 있는 영역 | |||
*뷰포트는 디바이스에 따라 각각 다른 값을 가짐 | |||
*타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임 | |||
==뷰포트 기초예제== | ==뷰포트 기초예제== | ||
< | <syntaxhighlight lang='html5'> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html lang="ko"> | <html lang="ko"> | ||
<head> | <head> | ||
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
<meta name="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" /> | <meta name="viewport" content="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" /> | ||
<title>제목</title> | <title>제목</title> | ||
</head> | </head> | ||
| 14번째 줄: | 19번째 줄: | ||
</body> | </body> | ||
</html> | </html> | ||
</ | </syntaxhighlight> | ||
→ 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0 | → 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0 | ||
| 52번째 줄: | 57번째 줄: | ||
;예제 | ;예제 | ||
< | <syntaxhighlight lang='html5'> | ||
<meta name="viewport" content="width=device-width, user-scalable=no" /> | <meta name="viewport" content="width=device-width, user-scalable=no" /> | ||
</ | </syntaxhighlight> | ||
→ 기기 화면 크기에 맞추고 고정(확대축소 불가). | |||
==아이폰 화면 크기== | ==아이폰 화면 크기== | ||
| 65번째 줄: | 69번째 줄: | ||
*URL Bar 높이: 60px | *URL Bar 높이: 60px | ||
*Button Bar 높이: 44px | *Button Bar 높이: 44px | ||
==같이 보기== | |||
*[[캔버스]] | |||
*[[스마트폰 기종 확인]] | |||
[[분류:HTML5]] | [[분류:HTML5]] | ||
[[분류:모바일 웹]] | [[분류:모바일 웹]] | ||
==참고== | |||
*http://www.w3schools.com/css/css_rwd_viewport.asp | |||
2021년 9월 24일 (금) 23:17 기준 최신판
1 개요[ | ]
- viewport
- 뷰포트
- 웹페이지에서 실제 사용자가 볼 수 있는 영역
- 뷰포트는 디바이스에 따라 각각 다른 값을 가짐
- 타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임
2 뷰포트 기초예제[ | ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="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
3 속성[ | ]
다음과 속성들이 있다.
| 속성 | 의미 | 값 |
|---|---|---|
| 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 |
- 아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
- 예제
<meta name="viewport" content="width=device-width, user-scalable=no" />
→ 기기 화면 크기에 맞추고 고정(확대축소 불가).
4 아이폰 화면 크기[ | ]
스마트폰 화면 크기 문서를 참고하십시오.- 아이폰: 320 x 480 px
- Status Bar 높이: 20px
- URL Bar 높이: 60px
- Button Bar 높이: 44px
5 같이 보기[ | ]
6 참고[ | ]
로그인하시면 댓글을 쓸 수 있습니다.
{{ comment.name }}
{{ comment.created | snstime }}
-
{{comment.page_title}} ―{{comment.name}}