22

Webアプリのに次のコードがあります<head>が、スプラッシュ画面の代わりにDOMが読み込まれているときに、iPhone3GSで白い画面が表示されます。

<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アプリを構築するためにjQueryMobileを使用しています。

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

4

2 に答える 2

52

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

<!-- 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">

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

<!-- 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">

スタートアップ画像やアイコンなど、最小限のiOSWebアプリで要点を維持しています。さらに解説が必要な場合は、iPhone5のスタートアップイメージに関するブログ投稿も作成しました。

于 2012-10-03T15:03:20.227 に答える
3

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

<!-- 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">
于 2012-09-28T16:28:01.440 に答える