1.2012 현재 주요 모바일 기기 지원 해상도 (한국 기준)
1) 스마트폰
2) 태블릿PC
2. index 삽입 문구 (상위 일반 index_모바일 경로 이전)
<?php
1) 스마트폰
| 기종 | 해상도단위 | 비고 |
|---|---|---|
| iPhone 3G/3GS | 480x320 | LCD / iOS |
| iPhone 4/4S | 960x480 | Ratina Display / iOS |
| GALLEXY S/S2 | 800x480 | Super AMOLED / Android |
| GALLEXY S2 HD | 1280x720 | Super AMOLED PLUS / Android |
| GALLEXY A | 800x480 | AMOLEPLUS / Android / Bar 38px |
| GALLEXY U | 800x480 | LCE / iOS |
| HTC Desire HD | 800x480 | AMOLED / Android / WVGA |
| VEGA RACER | 800x480 | 4.3 Inch / TFT-LCD / Android |
| Optimus Q | 800x480 | HD-LCD / Android |
| Optimus LTE | 1280x720 | HD-LCD / Android |
| XPERIA | 854x480 | LCD VA패널 / Android |
| MOTOROI | 854x480 | LCD TFT / Android |
2) 태블릿PC
| 기종 | 해상도단위 | 비고 |
|---|---|---|
| iPad / iPad2 | 1024x768 | LCD / iOS |
| new iPad | 2048x1536 | Retina Display / iOS |
| GALLEXY TAB | 1024x600 | 7 Inch / Super AMOLED / Android |
GALLEXY 10.1 | 1280x800 | 10.1 Inch / WXGA / Android |
| GALLEXY NOTE | 1280x800 | 5 Inch / Super AMOLED / Android |
2. index 삽입 문구 (상위 일반 index_모바일 경로 이전)
아래의 문구는 선언문 이전 index 제일 첫 문장에 삽입해준다.
이 인덱스는 Mobile 웹에 기재하는 인덱스가 아닌, 일반 홈페이지에 작성하여야 한다.
$arr_browser = array ("iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC");
for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {
if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){
// 모바일 브라우저라면 모바일 URL로 이동
header("Location: http://이동할 주소 등록");exit;}}?>
현재 브라우저가 iPhone, iPod, IEMobile, Mobile,lgtelecom, PPC 이면 모바일 사이트로 이동한다.
*자바스크립트로 풀어낸 또다른 문구
<script type="text/javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson','Windows Phone');
for (var word in mobileKeyWords){
if (navigator.userAgent.match(mobileKeyWords[word]) != null){
location.href = "http://m.naver.com";
break;
}
}</script>
ex)
http://naver.com 으로 모바일기기로 접속시 →
http://m.naver.com 으로 자동 이동
3. 모바일 index 삽입 문구 (모바일로 링크된 index)
아래의 문구는 모바일 페이지 index 제일 첫 문장에 삽입해준다.
<!--작은 모바일 화면에 맞게 웹페이지 화면 맞추기-->
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
메타 태그 설명 :
initial-scale : 확대 비율 (1.0 - )
maximum-scale : 최대 확대 비율(1.0 - )
user-scalable :유저가 화면을 확대 하게 하는가 (yes / no 로 표기)
4. 모바일 선언문(DTD)
야후 모바일 [http://m.yahoo.com]
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
유튜브 모바일 [http://m.youtube.com]
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
위와 같이 DTD 를 모바일 전용 DTD로 지정하는 경우가 있지만, 현재 스마트폰의 대부분이 풀브라우징을 지원하기 때문에 그 사용 빈도가 점점 줄어드는 추세라고 한다. 더욱이 html5 가 활성화되면 DTD가 단순화되어 <!DOCTYPE html> 전부 통합될 전망이다.
[출처] HTML 모바일 코딩을 위한 기본 지식 - 2012년판 : HTML Mobile Cording Bible 2012|작성자 머프키브
'IT' 카테고리의 다른 글
| [j-Query/Animation] 백그라운드 움직이기。 (0) | 2012.03.26 |
|---|---|
| [무료한글폰트] 한글 웹서체 독립선언! 농협희망체。 (0) | 2012.03.26 |
| [Tutorials]23가지 무료 하이 퀄리티 HTML5 템플릿 (0) | 2012.03.23 |
| [갤러리]코리아 디지털디자인 국제공모전 갤러리。 (0) | 2012.03.23 |
| [CSS/TEXT] 이젠 텍스트타입 테스트하고 이용합니다。 (0) | 2012.03.23 |
