| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- 예제
- 라즈베리파이
- 잡토이 메이킹 코딩 학원
- html5
- 안드로이드
- mysql
- s4a
- tomcat
- 강좌
- 설치
- oracle
- 오라클
- 톰캣
- 아두이노
- 운정
- 잡토이
- MSSQL
- 설정
- 리브레캐드
- 스크래치
- Spring Security
- 코딩
- Unity
- jsp
- librecad
- 파주
- Android
- 유니티
- jobtoy
- 시작하기
- Today
- Total
랩제이
[html5] viewport 지정하기 본문
[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 |
