주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
아이폰, 안드로이드 바탕화면에 바로가기 만들기
입력 2012.03.27 오후 04:50 | 수정 2012.03.27 오후 05:10 | 조회 9,629
x-mind
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" />')
}



모바일 웹 앱 개발자는 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" />


각각은 다음과 같은 기능을 지원한다.
<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 이다.

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

화면이 로딩될 때 스타트업 이미지를 지정할 수 있다. Web App 이지만 앱 처음 로딩시 로고화면 같은걸 보여줄 수 있다. 아이폰 기본 앱에 들어있는 Default.png 와 비슷한 역할이다.
단, 이미지의 크기가 정확히 맞아야 한다. 아이폰은 320×460 , 아이폰4는 640×920 , 아이패드는 768×1004 로 정확히 맞춰야만 제대로 화면에 표시된다.

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

Web App으로 선언하여 브라우저의 UI ( URL 바 ) 를 안 보이도록 할 수 있다.
즉, Web App 이 마치 일반 Native App 처럼 화면 전체 ( 최상단 상태바 20px 제외) 를 활용할 수 있도록 한다.

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

상태바의 색상을 지정할수 있다. 바탕화면이 검정색인 어플리케이션의 경우 상태바만 회색인 이질감을 줄이기 위해 사용한다.
3가지 스타일 : default (회색) , black , black-translucent ( 반투명 )
이렇게 4가지 기능을 지원함으로써 HTML5 기반의 Local 또는 Online Web Application 들이 마치 Native App 처럼 실행하는 효과를 지원할 수
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind6372015.04.02
HTML5강좌 링크x-mind1,7802012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind2652016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind8522016.04.22
21유투브 동영상을 배경으로x-mind3742016.03.30
20Canvas - 파일로 저장x-mind4992015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind1,0462015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind9152015.01.22
17[HTML5] 위치정보 사용하기x-mind1,0472014.10.27
16모바일 브라우저 테스트 도구x-mind1,3912014.03.20
15Safari 브라우저 모바일 모드x-mind1,5192014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,8442013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,8842013.03.26
12모바일 웹 스크롤 페이징x-mind7,8282013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,5422013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,3582013.01.24
9웹표준 코딩시 주의할점x-mind2,7392012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,1672012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind9,6292012.03.27
6이전버전에서의 HTML5요소 사용x-mind1,0212012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,2492012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,1942012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1