☰

iOS/iPhone: Web アプリのスプラッシュ画面が表示されない 質問する

tag-icon • tag-icon iphone ios jquery-mobile media-queries splash-screen
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 アプリのアイコンはホームページに追加すると機能します。この Web アプリの構築には jQuery Mobile を使用しています。

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

ベストアンサー1

このsizes属性はapple-touch-icons では機能しますが、 では機能しませんapple-touch-startup-image。起動イメージをターゲットにする唯一の方法は、メディア クエリを使用することです。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ウェブアプリを備えたGist起動イメージやアイコンも含まれています。さらに詳しい解説が必要な場合は、こちらもご覧ください。iPhone 5の起動画像に関するブログ投稿。

おすすめ記事