Webアプリの場合、apple-touch-startup-imageで起動画面を設定できます
iPadはどうですか?
Webアプリの場合、apple-touch-startup-imageで起動画面を設定できます
iPadはどうですか?
私も同じ問題を抱えていました... 1004 * 768の特定のサイズを使用する必要があります。このブログで説明しました: http://www.amirnaor.com/?p=71
これにより、Webアプリにスプラッシュ画面が追加されます。以下は、iPadとiPhone / iPod Touchの両方、およびiPhone5に必要なサイズです。これらにはステータスバー領域も含まれます。
<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
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-touch-startup-image-640x920.png"
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-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iPad -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: portrait)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (device-height: 1024px)
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
iPad互換のWebアプリを作成する場合は、横向きと縦向きの両方のサイズを使用することをお勧めします。
縦長の画像は 768x1004 である必要があります (注: 1024 ではなく 1004、20px はステータス バー用です)。PNG が優先ファイル形式です。
横向きの画像は 1024x748 である必要があります (注: 748、ステータス バーの場合は 20px)。次に、この画像を時計回りに 90 度回転させる必要があります。最終結果は 748x1024 になります。
ヘッダーのリンク タグは次のようにする必要があります。
<link rel="apple-touch-startup-image" href="images/splash_screen_768x1004.png" media="(device-width: 768px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="images/splash_screen_1024x748.png" media="(device-width: 768px) and (orientation: landscape)" />
新しい Retina iPad の場合 (これらを追加しない場合、上記のピクセル倍増が使用されます):
<link rel="apple-touch-startup-image"
href="images/splash_screen_1536x2008.png"
media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image"
href="images/splash_screen_2048x1496.png"
media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
投稿時の以前の回答 (受け入れられた回答を含む) は、私のテストでは機能しませんでした。
私が見つけたこの問題の最良の説明: https://gist.github.com/472519
iPhoneの起動イメージとiPadの横/縦の両方を提供した場合にのみ機能することに注意してください。
寸法が 748x1024 の PNG 画像を作成することによってのみ、起動画像を機能させることができました。これは、ファームウェア 3.2.1 の iPad でテストされました。
Madhup は、Objective C で記述され、xcode でコンパイルされたネイティブ アプリを参照していると思います。OPは、サファリ経由でホームスクリーンに追加されたWebアプリで機能するようにしようとしています。これまでのところ機能していません:(
今日のテストから、iPad は apple-touch-startup-image をサポートしていないようです。iPhone が OS 3.1 でこれをサポートし、iPad がサポートしていないのは非常に残念です。また、クロムレス ブラウザで Web アプリケーションを使用すると、ビューポートが正しく設定されません。どちらも iPad OS 3.2 のバグまたは省略であると私は信じています。残念です:(私はAppleフォーラムでそれを求めました: https://devforums.apple.com/thread/47178
アイフォンと同じです。という名前の pngDefault.png
をリソース フォルダーに配置します。