20

これはここで何度も尋ねられましたが、確かで理解できる答えはありません。これはウェブアプリであり、ネイティブアプリではありません。

私が使用しているもの：

<link rel="apple-touch-startup-image" href="images/startup.png" />

起動イメージを表示します。画像の解像度が320x460の場合、正常に読み込まれます。網膜の解像度である640x920（40pxはステータスバーによって取り出されます）を使用してみましたが、機能しませんでした。私はそれを試しました@2xが、それも失敗しました。

[まだ]可能ですか？

4

5 に答える 5

12

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

于 2012-03-04T04:08:10.510 に答える
6

ドキュメント（ここにあります）には次のように書かれています。

iPhoneおよびiPodtouchでは、画像は320x460ピクセルで縦向きである必要があります。

さまざまなサイズを提供してテストしましたが、サイズが正確に320x460でない場合、画像は単に無視されます。高解像度のスタートアップイメージを含めることが可能かどうかについてAppleからの明確な声明はありませんが、フォーラムの投稿（例：Apple Dev Forum）は、現在それが不可能であることを示唆しています。

于 2010-10-04T12:35:06.807 に答える
5

テストを行ったところです...アップルは「サイズ」属性を追加しました。したがって、高解像度の場合は、sizes="640x920"などを追加します。これはさまざまな向きでも機能すると思います。

于 2011-03-10T22:34:46.033 に答える
0

これは私のために働きます：

<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />
于 2012-07-24T18:16:50.297 に答える
0

したがって、よく理解していれば、考慮すべき3つのパラメーターがあることを考えると、実際には8つの異なる画像が必要です。

  • デバイス（iPhoneまたはiPad）
  • 解像度（網膜かどうか）
  • オリエンテーション（ポートレートまたはランドスケープ）

私は正しいですか？

于 2012-09-28T00:06:58.177 に答える