私は試した
<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">
しかし、うまくいきませんでした。また、Apple のインターフェイス ギルドラインは iphone5 用に更新されていません。
誰か知ってる?ありがとう!
私は試した
<link href="Images/Default-568h@2x.png" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">
しかし、うまくいきませんでした。また、Apple のインターフェイス ギルドラインは iphone5 用に更新されていません。
誰か知ってる?ありがとう!
1. ビューポートに「width=device-width」を使用しないでください。以下のコードを使用してください。
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
2. サイズが 640*1096 の画像を準備し、「Images/Default-568h@2x」として保存し、次のコードをページのヘッダーに追加します。
<link href="Images/Default-568h@2x.png" rel="apple-touch-startup-image" sizes="640x1096">
これはデモです。iPhone5 と互換性があります: https://github.com/openfibers/php-tot
起動イメージは、レターボックスと直接の関係はありません。
解決策は、ビューポートをデバイス幅または 320 とは異なる幅に変更することです。なぜですか? わかりません。本当に奇妙ですが、次のビューポートを使用するだけでは、レターボックスが表示されません。
<meta name="viewport" content="width=320.1">
apple-touch-startup-imageのsize属性は無視されるため、複数指定する場合はメディア クエリを使用する必要があります。
他の解決策は、iPhone/iPod 4 の場合に JavaScript を使用してビューポートを更新することです。」
ソリューションと調査結果の詳細については、http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers#updatewebappsを参照してください。
これには公式のリファレンスがあります…(iPhone 5の場合でも)