iPhoneの場合、link要素のrel属性値を「apple-touch-icon」とすれば、光沢などの画像処理が自動的に行われ、「apple-touch-icon-precomposed」とすれば光沢処理は行われません。それに対して、Androidでは「apple-touch-icon」「apple-touch-icon-precomposed」どちらでも光沢処理は行われません（サンプル）。
| rel | iPhone | Android |
|---|---|---|
| apple-touch-icon | 光沢あり | 光沢なし |
| apple-touch-icon-precomposed | 光沢なし | 光沢なし |
 |
| ▲iPhone 4（iOS 5.0.1） |
 |
| ▲Xperia arc（Android 2.3.4） |
また、iPhoneではlinkタグで指定する以外にも、Webサーバーのルートディレクトリーに「apple-touch-icon.png（もしくはapple-touch-icon-precomposed.png）」というファイル名でアイコン画像を置く方法がありますが、Androidではこの方法には対応していないようです。
アイコンサイズは、Xperia arcの場合「72×72ピクセル」のようです（サンプル）。
iPhoneとAndroidに異なるアイコンを指定する
<link rel="apple-touch-icon" href="a.png"> <link rel="apple-touch-icon" href="b.png"> <link rel="apple-touch-icon" href="c.png">
例えば、前記のように「apple-touch-icon」を複数指定した場合、iPhoneとAndroidそれぞれで有効となるアイコンは次の通りです（サンプル）。
| デバイス | アイコン |
|---|---|
| iPhone | a.png |
| Android | a.png |
同じように、「apple-touch-icon-precomposed」を複数指定した場合の結果は次の通りです（サンプル）。
| デバイス | アイコン |
|---|---|
| iPhone | a.png |
| Android | c.png |
「apple-touch-icon」を指定した場合は、iPhoneとAndroidどちらも同じアイコンになりますが、「apple-touch-icon-precomposed」を指定した場合は、それぞれ異なるアイコンになります。
iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。
この違いを利用して、次のような順序で記入すると、iPhoneとAndroidに異なるアイコンを指定できます。
<link rel="apple-touch-icon-precomposed" href="iphone.png"> <link rel="apple-touch-icon-precomposed" href="android.png">
また、iPhone向けには「apple-touch-icon」を指定したい場合は、sizes属性を利用して次のように記入します（iOS 4.2以降）。
<link rel="apple-touch-icon" href="android.png"> <link rel="apple-touch-icon" href="iphone.png" sizes="57x57 72x72 114x114">
さらに、iOS端末の解像度別にアイコンを指定する場合は、次の通りです。
<link rel="apple-touch-icon" href="android.png"> <link rel="apple-touch-icon" href="iphone.png" sizes="57x57"> <link rel="apple-touch-icon" href="ipad.png" sizes="72x72"> <link rel="apple-touch-icon" href="iphone4.png" sizes="114x114">
ただし、iOS 4.2以前の端末はsizes属性に対応していないため、Android向けのアイコンが指定されてしまうので要注意です。
しかし、ここまでしたところで、Android端末のバラバラな画面解像度には対応できないので、結局、大きめのアイコン画像を1枚用意して、端末の自動リサイズに任せた方がいいんでしょうか。
ホーム画面にブックマークのショートカットを作成する方法
Xperia arc購入から2ヶ月経って、やっとホーム画面にブックマークのショートカットを作成する方法に気付いたのですが、その方法は一旦普通にブックマークを登録してから、ブックマークリストのブックマークを長押し→「ショートカットを作成」。もしくは、ホーム画面を長押し→「ショートカット→ブックマーク」で、登録済のブックマークを選択します。
0 件のコメント:
コメントを投稿