본문 바로가기

[Moblie] meta 태그와 link

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
[Moblie] meta 태그와 link  (0) 2013.01.09