[펌]모바일 웹 환경 설정 하기

1. 작은 모바일 화면에 맞게 웹페이지 화면 맞추기

아래 META 태그를 쓰면  화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다. 
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요 

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />  initial-scale  <- 확대 비율  maximum-scale <- 최대 확대 비율  user-scalable <- 유저가 화면을 확대 하게 하는가

2. 가장 상위 오브젝트는 수치로 가로를 넣어줘야합니다! 
※ %로 넣어줄시  제대로 크기가 적용되지 않습니다.

ex>  <div style="width=100%;">  --->   <div style="width=480px;">

3. 아이폰에서 동영상 재생을 하고 싶다면 MP4파일을 링크 시켜라
※ 오페라 같은경우 아래와 할경우 파일이 다운이 되더군요,, 무튼 옴니아2에서도 동작은 한다는 이야기입니다.. 친구폰 데이터요금이 걱정되는 바람에 다운받다가 그냥 실행되는 화면은 보지 못했습니다. 아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.

<A HREF="AAAA.mp4"> 동영상보기 </A>

4. 바로가기  아이콘 만들기 (아이폰)
모바일웹하다가  [+] 버튼을 눌루면 홈화면에 추가 라는 버튼이 있는데 그럼 아이폰에서는 어플들처럼 아이콘으로 저장됩니다. 그때 아이콘을 아래와 같이 소스로 하면 원하는 이미지로 넣을수 있습니다
아이폰 어플 특유의 라운딩과 반사처리는 자동으로 됩니다~~!!

<link rel="apple-touch-icon" href="/images/icon.png" />       ▲ 요것이 제 아이폰에 추가한 자주들락날락하는 다음,네이버,엔카 아이콘입니다. 아이콘 설정을 해주지 않을경우 메인화면을 캡쳐해서 아이콘을 생성하는데 이럴경우 굉장히 미우니 신경쓰심이 좋을듯합니다~!

마지막으로 드리고 싶은 말씀은 자바스크립트 사용시 웹표준 고려하셔야 하는 거 잊지 말아야 하는 것과, 
전편에 쓴 주의사항과 오늘 작성한 팁을 활용하면 나의 모바일 웹 사이트를 쉽게 만드실수 있을꺼라 생각됩니다.

오늘은 모바일 브라우저를 체크하는 법을 알아보도록 하겠습니다.

스마트폰 인터넷 브라우저 ( 사파리, 오페라 , 모바일ie) 등을  열고 www.daum.net를 주소창에 써보면
신기하게  내가 모바일로 들어온지 알아서 체크해줘서 자동으로  m.daum.net/mini 으 로 보내주는걸  볼수 있습니다. 

우리의 모바일 홈페이지도 만찬가지로 사용자가 들어온 브 라우저를 확인하고 포워딩 시키는 것을 같이 해보도록 하겠습니다^^
(아래 포스팅은 웹 언어중 PHP 기준으로 서술하였습니다.)


시작하기 전에 먼저 가상 URL를 정하겠습니다.
 - PC버전 URL :    www.web2log.com
 - 모바일버전 URL :  m.web2log.com 


PC 버전 페이지 상단에  브라우저 체크해주는 파일을 인크루드 하여 아래와 같이 소스를 작성합니다.

<?php
 $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://m.web2log.com/");
   exit;

 }
}

?>

소스 설명을 하기 전에 
$_SERVER['HTTP_USER_AGENT'] 라는  서버 함수에 대해 약간의 설명을 하고 지나가겠습니다.

$_SERVER['HTTP_USER_AGENT']  는 유저의 브라우저 정보를 알수 있는  서버 함수 입니다. 
ASP 와 JSP 에서도 비슷한 함수가 있는 걸고 알고 있습니다 ^^ HTTP_USER_AGENT 로 검색하시면 찾으실 수 있으실거예요^^;

저 함수를 쓰면 Mozilla/4.0(compatible; MSIE 6.0; Window NT5.1; Q312461; .NET CLR 1.0.3705 이런식으로 화면에 표기됩니다. (물론 IE에서 접속하신분들만요 ^^ 파이어폭스나 사파리 오페라는 각각 다르게 나오죠) 

이제 $_SERVER['HTTP_USER_AGENT'] 함수가 뭐하는 함수인지 아시니 그만하도록 하구요.
위에 브라우저 체크하는 소스 설명을 간단히 하겠습니다.

$arr_browser 는  배열 변수로 "iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC" 이라는 단어를 저장했습니다.

즉, $_SERVER['HTTP_USER_AGENT'] 로 나오는 정보중에서  각각의 핵심 단어만 배열변수에 저장해둔거예요  (모바일 경우에만 나오는 단어들이죠 )

그리고 strpos 함수를 써서  배열함수에 들어가 있는 단어가  $_SERVER['HTTP_USER_AGENT'] 정보에 있다면 이 사람은 모바일 환경이 분명하니 모바일 홈페이지로 가게 해주는 아주 아주 간단한 소스랍니다 ^^; 이제  모바일 브라우저로 접속하는 유저만 콕 집어서  모바일 홈페이지로 보내줄수 있겠죠? ~~ 한번 해보세요!!!


※ 덧붙임 ..>> $_SERVER['HTTP_USER_AGENT'] 를 썼을 때 각각 브라우저 정보 

 
- MSIE 6.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) 

- Firefox 2.0.0.4
Mozilla/5.0 (Windows; U; Windows NT 5.1; ko; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

 - Opera 9.21
Opera/9.21 (Windows NT 5.1; U; ko)

 - Netscape 9.0b1
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.5pre) Gecko/20070604 Firefox/2.0.0.4 Navigator/9.0b1

- 크롬 
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.0.249.49 Safari/532.5

-LG 아르고폰(LG텔레콤) 
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; 800*600;POLARIS 6.0;em1.0;lgtelecom;EB10-200090218-707682823;LG-LH2300;0);


-iPod Touch 
Mozilla/5.0 (iPod; U; CPU like Mac OS X; ko-kr) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3


-옴니아 Opera Mobile 
SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; PPC) Opera 9.5


-옴니아 IE Mobile 
SAMSUNG-SCH-M490/(null)HK4 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11)


출처:[모바일웹] 모바일 홈페이지를 만들어보자 (퍼온글)