Mobile용 Meta Tag

MobileOptimized Meta Tag
Microsoft에서 모바일을 위해 Layout의 가로 크기를 조정하기 위해 고안한 태그
ex) <meta name="MobileOptimized" content="width">
Smartphone : content = "176"
pocket pc : content="240" or content="480"

HandheldFriendly Meta Tag
Palm의 AvantGo mobile browser를 위한 태그
모바일 화면 크기 조정관련 설정
ex) <meta name="HandheldFriendly" content="true" />
* true : 모바일용(화면 크기 조정 기능)
* false : Desktop에 최적화된 html 사용

Viewport Meta Tag
대부분의 스마트폰 브라우저에서 화면의 크기를 조정하기 위해 사용
기존 width값은 980px
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

Viewport META	Example Value	Description
width	width = 320 width = device-width	가로 크기 (기본 980px)
height	height = 480 height = device-height	세로 크기 (안해도 됌)
user-scalable	user-scalable=no	사용자의 배율 확대 축소 여부 설정 모바일 사파리 기본 : 사용함
inital-scale	inital-scale=2.0	페이지 배율 ( 0 ~ 10) 안정적 1 크면 확대, 작으면 축소
maximum-scale	maximum-scale=2.5	사용자 확대 최대 비율
minimum-scale	minimum-scale=0.5	사용자 축소 최소 비율

Media Query
다양한 화면 크기를 갖는 디바이스 화면 스타일을 지원하기 위해 CSS에서 제공
기존 HTML4와 CSS2에서 각 미디어별로 스타일 지정을 위해 사용한 media type을 확장
스마트폰의 가로/세로 전환에서도 적용 가능

@media screen and(min-width:321px) and (max-width:480){
/* 적용할 스타일 */
}

@media screen and(orientation:portrait){ /* 적용할 스타일 */ } @media screen and(oratation:landscape){ /* 적용할 스타일 */ }
/* iPhone일 경우 가로 */ @media screen and(max-width:320px){ /* 적용할 스타일 */ }

/* iPhone일 경우 세로 */ @media screen and(min-width:321px) and (max-width:480px){ /* 적용할 스타일 */ }

Example)
같은 url이지만, 브라우저 가로 크기에 따라 변하죠?

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>N-Screent Test</h1>

<ul>

</ul>

</div>

<h2>여기는 카라 팬카페입니다. 특히 한승연</h2>

<p>

한승연.. 카라.. 어쩌구 저쩌구!!! 한승연.. 카라.. 어쩌구 저쩌구!!! 한승연.. 카라.. 어쩌구 저쩌구!!!

</p>

</div>

<p>

소녀시대, 원더걸스, 에프터스쿨..??

</p>

</div>

</body>

</html>

[Source 1] n-screen.html

#container

{

float : left;

width : 1000px;

background : #bbb;

}

#nav

{

float : left;

width : 200px;

background : green;

}

#content

{

float : left;

width : 550px;

margin : 0 0 0 25px;

background : blue;

}

#extras

{

float : right;

width : 200px;

background : red;

}

.feature-image

{

float : right;

margin : 0 0 10px 10px;

}

@media screen and (max-width:990px)

{

#container

{

width: 800px;

}

#extras

{

clear : left;

float : none;

margin : 0 0 0 225px;

width : 550px;

}

@media screen and (max-width:480px)

{

#container

{

width:400px;

}

#nav

{

float : none;

width : auto;

}

#content

{

float : none;

width : auto;

margin : 0;

}

#extras

{

float : none;

width : auto;

margin : 0;

}

.feature-image

{

display : none;

}

[Source 2] test.css

'Devlopment > Web' 카테고리의 다른 글

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at write.php:1) in session.inc on line 2 (0)	2012.01.10
request.getRemoteAddr()가 0:0:0:0:0:0:0:1이 나오는 이유 (0)	2011.08.31
iPhone Web App 만들기 (0)	2011.06.15
서버사이드 자바스크립트 기술 (0)	2011.06.14
이클립스, 톰캣 개발 환경 구축 (0)	2010.12.22
텔넷 접속 Script (0)	2010.07.01
try문 안에서 변수 값 (0)	2010.06.04
원래 창 페이지 이동 (0)	2009.03.05
substring (1)	2008.09.17
PHP 문자셋 바꾸기 (0)	2008.08.25

'Devlopment > Web' 카테고리의 다른 글

티스토리툴바