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