iPhoneのWebアプリ起動画面

Question

私は「apple-mobile-web-app-capable」メタタグを使用して「フルスクリーンモード」を取得しているiPhone Webアプリに取り組んでいます。アプリを起動すると、読み込み中に最後に離れたページの写真が表示されます。アプリは入力を受け取る準備ができているように見えますが、そうでない場合は混乱を招きます。

デフォルトの動作を変更して、入力を受け取る準備ができるまで空白の画面を表示することは可能ですか?

Answer 1

あなたのHEADタグの間にこれを入れます：

<link rel="apple-touch-startup-image" href="image.jpg">

あなたは320x460の解像度でJPGまたはPNGである必要があります使用画像

Answer 2

これにより、Web アプリにスプラッシュ スクリーンが追加されます。以下は、iPad (Retina および非)、iPhone/iPod Touch (Retina および非)、iPhone 5 に必要なサイズです。これらにはステータス バー領域も含まれます。

Apple Docs-起動イメージ, Apple Docs - アイコンと画像のサイズ

<!-- 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 3

これは320x460でなければならない、それはその320x480の場合は動作しません。

Answer 4

画像はPNGと320x460これが唯一のiPhone OS 3.0以上で動作にする必要があります。