태그 보관물: Safari

iPad 음악 앱, 아티스트 목록 따라하기

아이패드의 음악 앱에서 아티스트 목록으로 가서 가수를 선택하면, 해당 가수의 앨범 목록이 나옵니다.
위아래로 스크롤을 해보면 앨범 제목과 커버자켓 이미지가 스크롤영역 상단에 고정되어 보이죠. 이걸 jQuery를 사용해서 만들어 봤습니다.

iPad 음악, 아티스트 목록

다음의 기기 및 브라우저를 지원합니다.
PC의 파이어폭스, 크롬, 사파리 완벽 지원(jQuery 사용)
IE9, 오페라 부분 지원(iScroll을 사용하여 기능 구현)
iOS 기기(iPhone 3GS 이전, iPad 오리지널 제외) 부분 지원(iScroll을 사용하여 기능 구현)
IE8 이전 버전 미지원
안드로이드 미지원

파이어폭스, 크롬 및 사파리의 경우 jQuery와 scroll 이벤트를 사용하면 이상없이 잘 동작합니다.

그러나 IE9와 오페라의 경우에는 화면 상단에서 레이어가 떨리는 현상이 발생하기 때문에 iScroll을 사용해서 동작하도록 구현 했습니다. 이때 iScroll에 scroll 이벤트가 없고, 휠 스크롤의 거리 등의 문제로 인해, iScroll 4에 약간 수정을 가한 파일을 사용했습니다.

IE8 이전 버전은 iScroll에서 지원하지 않으므로 제외했습니다.

iOS 기기도 대부분 iScroll을 통해 지원하지만, 일부 구형 모델은 속도 문제로 지원하지 않습니다.

안드로이드는 갤럭시 S3, 넥서스원, 베가 등의 단말에서 테스트 해 봤는데, 문제가 많아서 제외시켜 버렸습니다. jQuery로 제어하면 상단 레이어가 떨리고, iScroll을 사용하면 속도가 느려지는 등 많은 문제들이 생기네요. 게다가 단말기 마다 차이가 나고, 한 기기에서도 브라우저 별로도 다르게 동작하는 등 문제가 있습니다.

IE10 이상 및 윈도우 모바일 등 위에 언급되지 않은 환경에서는 테스트 해보지 못했습니다. 혹시 확인해 보실 수 있으면, 댓글로 결과 알려주세요.

ps. 정말, 웹 작업을 하다보면 IE가 개판이라고 몸소 느끼지만, 모바일 작업을 해보면 안드로이드도 이에 뒤지지 않는다는 사실을 절감하게 되는군요.

Apple-touch-icon, favicon on iPhone

PC의 브라우저에서 홈페이지를 북마크에 추가하면, 브라우저가 사이트 루트의 favicon.ico 파일을 찾아서 북마크 아이콘으로 사용합니다. 물론 다음 그림과 같이 주소표시줄 등에도 아이콘이 표시되죠.
If you add a bookmark in a browser on your PC, the browser searches for favicon.ico in root directory of the web site, and uses it as an icon of the bookmark if it exists. Of course the icon appeares in the browser’s address bar like bellow.
パソコンのブラウザでホームページのブックマークを追加すると、ブラウザはサイトのルートからfavicon.icoファイルを探し、それをアイコンとして使います。 下の絵のようにアドレスバーにもアイコンが表れます。

favicon

아이폰에서도 홈페이지의 바로가기를 홈 화면에 추가할 때 PC의 favicon과 같이 아이콘을 지정할 수 있습니다. 그냥 사이트 루트에 apple-touch-icon.png 파일을 만들어 두기만 하면 됩니다. 그러면 사파리에서 사이트를 홈 화면에 추가할 때, 이 파일을 찾아서 아이콘으로 사용합니다. 이 파일이 존재하지 않으면 그냥 사이트의 현재 화면을 캡처해서 아이콘으로 사용합니다.
아이콘에 반사광 효과를 사용하지 않으려면 위 파일 대신 apple-touch-icon-precomposed.png를 사용하면 됩니다.
On iPhone, you can set the icon when a visitor adds a short-cut to the home screen. Just place apple-touch-icon.png file in the root directory of your homepage. Safari searches for the image, then uses it as the icon. If the file is not exists, Safari takes snapshot of the page, and uses it as the icon.
If you do not want to use gloss effect on the icon, use apple-touch-icon-precomposed.png instead.
iPhoneでも、ホーム画面にブックマークを追加する時、faviconのようにアイコンを指定できます。ただapple-touch-icon.pngファイルをサイトのルートに置けば良いんです。すると、Safariがそのファイルをアイコンとして使用します。そのファイルがないと、現在のページをキャプチャーして、使います。光沢効果を使わない時には、替りにapple-touch-icon-precomposed.pngファイルを使用します。

apple_touch_icon

또는 다음과 같이 link 태그를 통해 이미지의 경로 및 파일명을 지정할 수 있습니다.
You can set the path or the file name of the image, using link tag like the following code.
下のコードを使って、他のイメージをアイコンに設定出来ます。
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />