[html5] viewport 지정하기
1. viewport 란 무엇인가?
스마프트폰은 기종별로 화면 크기가 다르다. 그렇다고 모든 단말기에 맞추어서 전용 버전을 개발해야 하는 것은 아니다.
화면 사이즈에 맞추어서 표시해주는 'ViewPort' 라는 기능을 이용하면 된다.
<meta> 태그로 ViewPort를 지정하면 자동으로 크기가 조절되는 기능이다.
<%--
- Description : ViewPort 지정하기
--%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device=width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
<title>ViewPort 지정하기</title>
<style>
article, aside, figure, footer, header, hgroup, memu, nav, section { display: block; }
p { font-size: 12px; }
</style>
</head>
<body>
<p>오늘은 맑음</p>
<p>오늘은 참 즐거운 날이었다.</p>
</body>
</html>
2. viewport 사용법
표시 화면의 크기, 확대/축소 허용, 초기 표시 배율을 <meta> 태그에서 지정 할 수 있다.
<meta name="viewport" content="속성1=값1, 속성2=값2,..." />
VIewPort 속성
속성 |
기능 |
| width |
너비(픽셀) |
|
height |
높이(픽셀) |
| initial-scale | 초기 배율(기본 꽉 찬 화면) |
|
minimum-scale |
최소 배율(기본값: 0.25, 범위:0~10.0) |
|
maximum-scale |
최대 배율(범위:0~10.0) |
|
user-scalable |
확대/축소 여부 (yes/no) |
[html5] viewport 지정하기
'programming > html5' 카테고리의 다른 글
| [html5] html5 표준 동영상 코덱 (0) | 2012.07.01 |
|---|---|
| [html5] 자바스크립트에서 스마트폰 단말기 정보 확인 (1) | 2012.05.22 |
| [html5] 스마트폰 화면 크기 (0) | 2012.05.22 |
| [html5] new Audio() 구문 사용법 (0) | 2012.05.21 |
| [html5] WebM (웹앰) (0) | 2012.05.21 |