20

Webアプリの場合、apple-touch-startup-imageで起動画面を設定できます

iPadはどうですか?

4

8 に答える 8

17

私も同じ問題を抱えていました... 1004 * 768の特定のサイズを使用する必要があります。このブログで説明しました: http://www.amirnaor.com/?p=71

于 2010-05-06T21:24:17.497 に答える
14

これにより、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アプリを作成する場合は、横向きと縦向きの両方のサイズを使用することをお勧めします。

于 2012-03-04T04:11:34.207 に答える
3

縦長の画像は 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)" />

投稿時の以前の回答 (受け入れられた回答を含む) は、私のテストでは機能しませんでした。

于 2012-06-05T04:50:44.207 に答える
1

私が見つけたこの問題の最良の説明: https://gist.github.com/472519

iPhoneの起動イメージとiPadの横/縦の両方を提供した場合にのみ機能することに注意してください。

于 2011-09-12T21:21:37.897 に答える
1

寸法が 748x1024 の PNG 画像を作成することによってのみ、起動画像を機能させることができました。これは、ファームウェア 3.2.1 の iPad でテストされました。

于 2010-08-24T19:53:18.623 に答える
1

Madhup は、Objective C で記述され、xcode でコンパイルされたネイティブ アプリを参照していると思います。OPは、サファリ経由でホームスクリーンに追加されたWebアプリで機能するようにしようとしています。これまでのところ機能していません:(

于 2010-04-27T16:59:43.030 に答える
-1

今日のテストから、iPad は apple-touch-startup-image をサポートしていないようです。iPhone が OS 3.1 でこれをサポートし、iPad がサポートしていないのは非常に残念です。また、クロムレス ブラウザで Web アプリケーションを使用すると、ビューポートが正しく設定されません。どちらも iPad OS 3.2 のバグまたは省略であると私は信じています。残念です:(私はAppleフォーラムでそれを求めました: https://devforums.apple.com/thread/47178

于 2010-04-20T15:13:44.337 に答える
-2

アイフォンと同じです。という名前の pngDefault.pngをリソース フォルダーに配置します。

于 2010-04-14T03:41:38.317 に答える