1. 문서타입
<!Doctype html>
2. 메타태그와 뷰포트
<meta charset="utf-8">
<meta id ="mobileMeta" name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable= no" />
- Width | 가상해상도, device-width지정하면 물리적 해상도와 웹 브라우저의 해상도를 일치
- initial-scale | 초기확대 축소비율
- maximum-scale | 최대 확대 비율, 1.0은 확대 안됨
- minimum-scale | 최대 축소 비율, 1.0은 축소 안됨
- user-scalable | 줌 컨트롤 or 핀치 줌으로 확대 축소 허용 여부
<meta name ="apple-mobile-web-app-status-bar-style" content="색상" />
- 아이폰 상태바 컬러 지정, default(회색) black black-translucent
3. link태그
● 홈 화면의 바로가기 링크, png파일로 72x72
<link rel ="shortcut icon" href="경로" /> <!-- 안드로이드 -->
<link rel ="apple-touch-icon" href="경로" /> <!-- iOS, apple-touch-icon-precomposed -->
● 아이폰 화면이 로딩될 때 스타트업 이미지 지정
<link rel ="apple-touch-startup-image" href="경로" />
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset= utf-8"> <title> </title> <meta name ="description" content=" " /> <meta name ="keywords" content=" " /> <meta id =" " name ="viewport" content="width=device-width" /> <link rel ="shortcut icon" href= "" /> <link rel ="apple-touch-icon" href="" /> <link href ="pc_layout.css" type ="text/css" rel ="stylesheet" media="screen and (min-width:769px)" /> <link href ="mobile_layout.css" type ="text/css" rel ="stylesheet" media="screen and (max-width:768px)" /> <!-- html5와 css 미지원 브라우저에 대한 설정 --> <!-- [if lte IE8 ] > <script src=http://html5shiv.googlecode.com/svn/trunk/html5.js ></script> <link href="layout.css" type="text/css" rel="stylesheet" media="all" /> <![endif]--> <link href="html5Reset.css" type="text/css" rel="stylesheet"/> <!-- html5와 css 미지원 브라우저에 대한 설정 끝 --> </head> </html>
'Box > Mobile' 카테고리의 다른 글
| [Mobile] HTML5 추가된 태그 (0) | 2013.01.11 |
|---|---|
| [Moblie] html5 Web Form (0) | 2013.01.09 |