- 뷰포트, viewport
1 개요
- viewport
- 웹페이지에서 실제 사용자가 볼 수 있는 영역
- 뷰포트는 디바이스에 따라 각각 다른 값을 가짐
- 타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임
2 뷰포트 기초예제
html
Copy
<!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이 된다.
- 예제
html
Copy
<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 같이 보기
편집자 Jmnote John Jeong Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.