《HTML, CSS, Javascript로 iPhone Apps 개발하기》를 보고 있습니다. 좋은 책입니다.

오늘 배운 걸 간단히 적어 둬야 나중에 써먹기 편할 것 같아서 정리합니다.

<link rel="apple-touch-icon" href="http://left21.com/images/아이콘이미지.png" />
<link rel="apple-touch-startup-image" href="/images/스타트페이지이미지.png"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>

위에서 첫 번째 줄은 아이콘 이미지입니다. 위와 같은 형식으로 추가를 해 줘도 되고, 그냥 홈페이지의 최상위 폴더에 apple-touch-icon.png 라는 이름으로 png 파일을 넣어 놔도 된다. 주의할 점은 png로 넣어야 한다는 점이다.

아이폰 3gs에서는 가로세로 57px이었다고 하니 4에 맞게 하려면 114px로 해 줘야 할 거다.

만약 apple-touch-icon 대신 apple-touch-icon-precomposed 를 쓰면 아이콘에 빤짝빤짝하는 윤기가 없이 원래 이미지 그대로 나오게 된다. 이건 link의 rel 어트리뷰트든 png 파일명이든 다 그렇다.

<link rel="apple-touch-icon-precomposed" href="http://left21.com/images/아이콘이미지.png" />

위처럼 쓰면 반짝빤짝하는 윤기가 안 나오게 되고 오리지널 이미지만 나오게 된다.

<link rel="apple-touch-startup-image" href="/images/스타트페이지이미지.png"/>

위처럼 쓰면 아이콘을 눌렀을 때 자신만의 스타트페이지를 갖게 된다.

스타트페이지이미지.png는 사이즈를 반드시 규격에 맞춰야 하는데 3gs든 4든 상관없이 가로 320px 세로 460px이어야 한다.

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

그리고 위처럼 쓰면 사파리의 주소표시줄과 아래쪽 버튼 패널이 안 나오고 전체화면 모드로 웹앱이 실행된다.

물론 웹앱에서 링크를 클릭하면 다시 사파리가 열리면서 웹앱은 종료된다.

따라서 웹앱은 모든 기능을 아작스로 처리해야 한다.

그리고 위의 태그들은 모두 모바일 사파리가 아닌 브라우저들에서는 무시한다.