質問

Webアプリの場合、Apple-Touch-StartUp-Imageで起動画面を設定できます

iPadはどうですか?

役に立ちましたか?

解決

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

他のヒント

これにより、Webアプリにスプラッシュ画面が追加されます。以下は、iPadとiPhone/iPod Touchの両方に必要なサイズとiPhone 5です。これらには、ステータスバーエリアも含まれます。

<!-- 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である必要があります(注:1004、1024ではなく、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)" />

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

Madhupは、目的Cで書かれ、Xcodeでコンパイルされたネイティブアプリを指していると思います。 OPは、Safariを介してHomescreenに追加されるWebAppsで機能させようとしています。これまでのところ機能していません:(

748x1024の寸法でPNG画像を作成することで、スタートアップイメージのみが機能しました。これは、ファームウェア3.2.1のiPadでテストされました。

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

iPhone用のスタートアップ画像とiPad用のランドスケープ/ポートレートの両方を提供したら、それは私のために機能したことに注意してください。

今日の私のテストから、iPadはApple-Touch-Startup-Imageをサポートしていないようです。 iPhoneがOS 3.1でこれをサポートしており、iPadがそうではないことは非常に残念です。また、Chromeless BrowserでWebAppを使用する場合、ビューポートは適切に設定されていません。 iPad OS 3.2のバグまたは脱落は両方だと思います。あまりにも悪い:(私はAppleフォーラムでそれを求めました: https://devforums.apple.com/thread/47178

iPhoneと同じです。名前のpngを入れます Default.png リソースフォルダー。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top