모바일 페이지 만들기 (아이폰, 아이패드)

블로그 유입 경로를 확인하다가
모바일 웹페이지 만들기 검색어로 유입이 된 게 있길래 간단하게 써본다.
(아. 당연히 태그, 자바스크립트 등의 웹페이지를 만들기 위한 기본적인 언어와 필요에 따라서 css, php 언어 등도 알고 있겠지??)

모바일 페이지만들기. 간단하게는 단지 사이즈만 맞춰주면 되지만 인터페이스를 아이폰과 흡사하게 만들어 줄 수도 있다.
iui 란 웹앱용 UI를 사용하면 되는데, 예제 파일이나 사용방법 등은 안에 예시 파일이나 검색으로 찾아보시길..
iui : http://code.google.com/p/iui/

사파리를 받아서 설정에서 개발자 용으로 전환하면 메뉴에 개발자 탭이 생기고 User-Agent (웹에서 사용자의 OS, 브라우저 구분할때 사용할 수 있습니다.) 를 아이폰이나 아이패드로 바꿀 수 있다.
아이폰 용으로 만든 싸이트 자체가 사파리나 크롬 외에서는 제대로 안돌아가니 사파리로 테스트 하고 필요에 따라 User-Agent 를 바꿔 테스트 하면 좋다.

또한 인코딩 문제가 자주 발생하므로 헤더에 인코딩 옵션을 지정해주는 메타태그를 꼭 넣어주자!
<meta http-equiv="content-type" content="text/html; charset=utf-8">  (UTF-8 을 사용할 경우.)

2009 년에 마지막으로 업데이트 됬다고 나오는데 그래서 그런지 iOS 특정 버젼에서는 몇가지 기능들이 조금 깨지는 것도 있는 듯...

능력이 된다면 알아서 css파일 수정해서 사용하도록! ㅎㅎ 



그리고 아마 쉽게 찾을수 있지 싶은데.. 

<link rel='apple-touch-icon' href='./img/icon.png'/>
 -> 홈화면에 추가를 눌렀을 때 나올 아이콘 설정 가능. 

<meta name="apple-mobile-web-app-capable" content="yes">
 -> 홈화면에 추가를 한 후 실행하였을때 주소표시줄, 아래 탭을 없애준다. 

<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;'/> 

  -> 아이폰에 맞게 화면 설정. scale 값을 조정함으로써 확대,축소 가 가능하게 할 수도 있음.

모두 헤더에 넣어주면 된다. 이외에도 상태바 색을 지정한다던가(홈화면으로 추가시에 적용) 몇가지 더 있다.

그리고 홈화면에 추가를 통해 실행하였는지 확인은
자바스크립트에서 window.navigator.standalone 값을 확인하면 된다. 


아 가장 기본적인 것 하나를 또 빼먹었군,
PC 인지, 모바일 기기(아이폰, 아이패드 등등) 인지 확인은 php 에서
$_SERVER['HTTP_USER_AGENT'] 값을 확인하면 된다. (물론 자바스크립트를 비롯한 다른 언어에서도 가능하다.)
strrpos 함수를 사용하여 iPod, iPad 등의 문자열이 있는지만 확인해도 충분!

도움이 되었기를 바라며,,,,