apple-touch-startup-image間違った解像度の画像を読み込む

Question

私は次のように指定されたスプラッシュスクリーンを持つSencha Touchウェブアプリケーションをやっています。画像は、それぞれ640x920と320x460です（ステータスバーとSenchaの例に従います）。

<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" /> 
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" /> 

ただし、iPhone 4ではまだ低解像度の画像しか表示されません。 （私が正しいイメージを見ていることを確認するために、適切なイメージに「640x920」と「320x460」のテキストを埋め込んでいます）

私はSafariのキャッシュをクリアして、アプリケーションを再ロードし続けます間違ったイメージが読み込まれ続けます。

私はそれらの権利を持っていることを確認するために、私は反対のファイルを指すようにリンクを切り替えましたが、予想通り、スプラッシュはロードされませんでした。

他の提案はありますか？

編集： 同様に、apple-touch-icon-precomposedも同様に2つの小さい方を読み込みます。

Answer 1

これは、Webアプリケーションにスプラッシュスクリーンを追加します。以下はiPadとiPhone/iPod Touchの両方に必要なサイズです。これらにはステータスバーの領域も含まれています。

<!-- iPhone --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

<!-- iPhone (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPhone 5 --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPad Portrait --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

<!-- iPad Landscape --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

<!-- iPad Portrait (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

<!-- iPad Landscape (Retina) --> 
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

iPad用のWebアプリケーションを作成する場合は、ランドスケープサイズとポートレートサイズの両方を使用することをお勧めします。

Answer 2

この時点でAppleは網膜ディスプレイ解像度の起動イメージをサポートしていないようです。 iPhoneやiPod touch上で自分のdocs ...

によると、画像は320×460ピクセルでと 縦向きでなければなりません。

高解像度の起動イメージのサポートについては、この記事では何も記載されていません。

この問題に関するもう1つの良い話題はhereです。

Answer 3

ドキュメントの不足は確かに不満です。私は解決策を見つけ、ここでそれについてブログしました：http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

基本的に、サイズプロパティとメディアクエリは機能しません。あなたのページがロードされたら、JavaScriptを介して高解像度の起動イメージを注入する必要があります。ハッキーだが動作する。