따로 운영하는 웹사이트가 있어 거기 모바일 홈페이지를 만들어 보았다.
스마트폰 홈에 아이콘 만들기 기능을 이용해 앱처럼 직접 갈수 있는 아이콘을 홈화면에 등록하는 데는 성공이었지만, 아....
아이콘이 엉망이다.. -_- 이런..
어떻게 하면 바꿀 수 있을까 웹을 뒤지다가 좋은 글을 발견..ㅎ
아.. 그런데 아이콘은 어떻게 만들어야하나....--;;
새로운 고민 시작.... 중..
일단 아이콘 만들기 전까진 코드 추가 보류닷..ㅠㅠ

저작자: 結婚できない男 
원본글: http://gt1000.tistory.com/93

영어가 안되는 관계로 여러 한글 커뮤니티 사이트에 질문을 올렸지만 답을 해 주는 사람이 없었다.
이게 맞는지 모르겠지만 혹시나 나 같이 고민을 하는 사람을 위해....
제가 사용한 방법은 꼼수 이니 더 좋은 방법이 있으신 분은 알려 주시기 바랍니다.

1 먼저 접속하는 사용자의 디바이스 정보를 알아야 했습니다.
iphone, ipad 는 userAgent 정보에 iphone, ipad 라는 문자가 들어가 있으나 안드로이드 기기의 경우
갤럭시S 같은 명칭이 없고 android 란 단어만 있었습니다.

2 애플 계열의 경우 rel="apple-touch-icon" 을 사용했습니다. apple-touch-icon-precomposed
도 사용할수 있음, 차이점은 이미지 모양, 아이폰 이미지의 경우 자동으로 줄여 줘서 114*114
아이패드는 72*72를 사용하였습니다.
안드로이드 폰의 경우 apple-touch-icon 이 적용 되지 않고 rel="shortcut icon"
favicon 을 사용 하였습니다.

3 갤럭시S, 갤럭시탭의 경우 웹 페이지에서 북마크를 할 경우 박스안에 아이콘이 생기는 현상이
있었는데 이건 os 정책인거 같습니다.

4 아이폰, 아이패드, 갤럭시S, 갤럭시탭, 기타 안드로이드 폰에서 문제 없이 잘 되었습니다.

// 접속 핸드폰 정보
var userAgent = navigator.userAgent.toLowerCase();
// 모바일 홈페이지 바로가기 링크 생성
if(userAgent.match('iphone')) {
   document.write('<link rel="apple-touch-icon" href="/mobile/image/apple-touch-icon.png" />')
} else if(userAgent.match('ipad')) {
   document.write('<link rel="apple-touch-icon" sizes="72*72" href="/mobile/image/apple-touch-icon-ipad.png" />')
} else if(userAgent.match('ipod')) {
   document.write('<link rel="apple-touch-icon" href="/mobile/image/apple-touch-icon.png" />')  
} else if(userAgent.match('android')) {
   document.write('<link rel="shortcut icon" href="/mobile/image/favicon.ico" />')
} else {
   document.write('<link rel="shortcut icon" href="/mobile/image/favicon.ico" />')
}

[출처]
http://snowflower.tistory.com/304

안드로이드의경우
Html 파일에 head부분에 아래와같이 적용하면 즐겨찾기 용 아이콘을 만들수있다.
<LINK REL="SHORTCUT ICON" HREF="/images/favicon.ico">

아이폰이나 아이패드의 경우 위와같이 하는것이 아니다..
<link rel="apple-touch-icon-precomposed" href="/images/favicon.png" />

안드로이드용 ico파일은 128 *128로 만들어야하고
아이폰용은 57*57로 만들어야한다..


[출처]
http://www.facebook.com/note.php?note_i ··· ref%3Dmf

모바일 웹 앱 개발자는 head 섹션에 아래의 4가지 태그를 추가할 수 있다.

<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

각각은 다음과 같은 기능을 지원한다.

  1. <link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/ >

    등록되는 웹 사이트의 아이콘을 지정할 수 있다. apple-touch-icon.png 가 기본 이름

    일반적으로 아이폰에서 웹사이트 아이콘을 추가하게 되면 웹사이트 화면을 캡쳐한 내용을 아이콘으로 사용하는데 apple-touch-icon 이라는 링크를 추가하여 아이콘을 내가 지정한 것으로 사용할 수 있다. favicon 의 아이폰 버전이라고 생각하면 된다.

    아이폰은 57×57 , 아이패드는 72×72, 아이폰4는 114×114 사이즈의 png 이미지를 사용한다. 가능하면 114×114 이미지로 만들어두면 아이폰에서 자동으로 크기 리사이즈를 한다.

    이 아이콘은 기본적으로 아이폰이 제공하는 UI 처리 ( 모서리를 둥글게 하고 반원형의 밝은 부분을 추가해 주는 것) 가 된다. 원하지 않을 때는 rel 속성의 값을 apple-touch-icon-precomposed 라는 이름으로 지정하여 사용하면 된다.

    <link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon-precomposed.png”/>

    → 이렇게 지정한 precomposed 아이콘 이미지는 안드로이드의 Add to Home Screen 기능에서도 지원된다. 사이즈는 48×48 이다.

  2. <link rel=”apple-touch-startup-image” href=”/startup.png”>

    화면이 로딩될 때 스타트업 이미지를 지정할 수 있다. Web App 이지만 앱 처음 로딩시 로고화면 같은걸 보여줄 수 있다. 아이폰 기본 앱에 들어있는 Default.png 와 비슷한 역할이다.

    단, 이미지의 크기가 정확히 맞아야 한다. 아이폰은 320×460 , 아이폰4는 640×920 , 아이패드는 768×1004 로 정확히 맞춰야만 제대로 화면에 표시된다.

  3. <meta name=”apple-mobile-web-app-capable” content=”yes” />

    Web App으로 선언하여 브라우저의 UI ( URL 바 ) 를 안 보이도록 할 수 있다.

    즉, Web App 이 마치 일반 Native App 처럼 화면 전체 ( 최상단 상태바 20px 제외) 를 활용할 수 있도록 한다.

  4. <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

    상태바의 색상을 지정할수 있다. 바탕화면이 검정색인 어플리케이션의 경우 상태바만 회색인 이질감을 줄이기 위해 사용한다.

    3가지 스타일 : default (회색) , black , black-translucent ( 반투명 )

이렇게 4가지 기능을 지원함으로써 HTML5 기반의 Local 또는 Online Web Application 들이 마치 Native App 처럼 실행하는 효과를 지원할 수 있다.

저작자 표시
크리에이티브 커먼즈 라이센스
Creative Commons License
2011/08/02 22:23 2011/08/02 22:23

트랙백 보낼 주소 :: http://www.i-fam.net/water/trackback/155

댓글을 달아주세요:: 네티켓은 기본, 스팸은 사절

[로그인][오픈아이디란?]

BLOG main image
새미 기픈 믈은 가마래 아니그츨씌.. by

카테고리

전체 (74)
궁시렁 (15)
(3)
(37)
GIS (7)
GeoTagging (8)
테터 & 텍스트큐브 (0)
바로 그때.. (3)
검색/링크 (0)

최근에 올라온 글

Total : 389196
Today : 40 Yesterday : 97
Download MathPlayer글 내용중의 수식을 보시려면 ^^
Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
자신만의 홈페이지를 만들어 올릴 공간을 갖고 싶다면,
한달에 오백원만 투자하세요