《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"/>
그리고 위처럼 쓰면 사파리의 주소표시줄과 아래쪽 버튼 패널이 안 나오고 전체화면 모드로 웹앱이 실행된다.
물론 웹앱에서 링크를 클릭하면 다시 사파리가 열리면서 웹앱은 종료된다.
따라서 웹앱은 모든 기능을 아작스로 처리해야 한다.
그리고 위의 태그들은 모두 모바일 사파리가 아닌 브라우저들에서는 무시한다.
