web-dev-qa-db-ja.com

iOS / iPhone：Webアプリのスプラッシュ画面が表示されない

Webアプリの<head>に次のコードがありますが、スプラッシュスクリーンの代わりにDOMがロードされている間、iPhone 3GSに白い画面が表示されます。

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="Apple-mobile-web-app-capable" content="yes" />
<meta name="Apple-mobile-web-app-status-bar-style" content="black" />

<!--STYLES-->

<!--SCRIPTS-->

<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/Apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="Apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/Apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/Apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="Apple-touch-startup-image">

スプラッシュスクリーンをiPhoneのすべてのバージョンで正しく表示するにはどうすればよいですか？コードは表示されませんが、ホームページに追加したときにWebアプリのアイコンが機能します。 jQuery Mobileを使用してこのWebアプリを作成しています。

また、PNG画像が正確なサイズであることを確認し、Webアプリのアイコンを削除し、更新して、ホーム画面に複数回再追加しました。 StackOverflowで見つけたソリューションはどれもうまくいきませんでした。純粋なCSSソリューションがあると確信しているので、JavaScriptソリューションを試していません。

iphoneiosjquery-mobilemedia-queriessplash-screen
21
Mark Rummel

sizes属性はApple-touch-iconsでは機能しますが、Apple-touch-startup-imagesでは機能しません。スタートアップイメージをターゲットにする唯一の方法は、メディアクエリを使用することです。 Adamの答えは良いですが、メディアクエリが十分に指定されていないため、<link>sが特定の順序になっていることに依存しています。以下は完全修飾メディアクエリです。

<!-- iPhone -->
<link href="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="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="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 (portrait) -->
<link href="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">
<!-- iPad (landscape) -->
<link href="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, portrait) -->
<link href="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">
<!-- iPad (Retina, landscape) -->
<link href="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">

また、特定のビューポートでは、WebアプリがiPhone 5でレターボックス化されることに注意してください。

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">

私は 最小限のiOS Webアプリを備えた要旨 を維持しています。これには、起動イメージとアイコンが含まれます。さらに解説が必要な場合は、 iPhone 5のスタートアップイメージに関するブログ投稿 も作成しました。

49
Taylor Fausak

使用する寸法は次のとおりです。

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/Apple-startup-iPhone.jpg" media="(device-width: 320px)" 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 (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">

<!-- iPhone Tall (Retina) -->
<link href="http://www.example.com/mobile/images/Apple-startup-iPhone-Tall-RETINA.jpg" rel="Apple-touch-startup-image" sizes="640x1096">

<!-- iPad (portrait) -->
<link href="http://www.example.com/mobile/images/Apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" 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 (orientation: landscape)" rel="Apple-touch-startup-image">

<!-- iPad (Retina, portrait) -->
<link href="http://www.example.com/mobile/images/Apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">

<!-- iPad (Retina, landscape) -->
<link href="http://www.example.com/mobile/images/Apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="Apple-touch-startup-image">
3
adamdehaven