html - iPhone 5 の homescreen-webapp の高さに合わせる

Question

Web アプリケーション (ホーム画面) の高さの調整に問題があります。次のメタタグを使用しています：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

私の問題は、画面の上下に黒いバーがあることです。画面が高いのでiPhone 5のバグかと思いました。しかし、今日、iPhone5 の画面にぴったり収まる webapp (apps.ft.com/) を見ました。

アイデアはありますか、何が間違っていますか?

ここに私の完全な関連メタタグがあります

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" href="img/icons/ios_icon_52.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/ios_icon_72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/ios_icon_114.png">

編集: 1 時間の検索の後、ブラウザーを強制的に全高に合わせる方法を見つけました。起動イメージ (apple-touch-startup-image) を定義すると、私の iPhone は高さにしか収まりません。ここに私のコード：

<!-- iPhone 4 (Retina) -->
<link href="img/icons/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="img/icons/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">

Answer 1

ビューポートのメタタグの「幅」の定義が問題の原因であることが最終的に判明するまで、私も何時間もこれに取り組んでいました。幅を削除すると、問題が修正されました。

Answer 2

これを使って

<meta name="viewport" content="user-scalable=0, initial-scale=1.0" />

スタートアップイメージとタッチアイコン については、iOS Webアプリ（特にiPad用）用のこの複数の「apple-touch-startup-image」解像度をお読みください。

;）

Answer 3

私もこの問題を抱えていたので、 width=device-width を削除して解決しました

Answer 4

ビューポート幅を完全に削除すると、解決するよりも多くの問題が発生します。Web アプリケーションが正しいビューポートの高さを持つためには、ビューポートの幅が 320 より大きい必要があります (残念ながら、これはdevice-widthブラウザーに報告される値です)。ビューポートのメタ タグを次のように更新しました。

<meta name="viewport" content="width=320.1, user-scalable=0, initial-scale=1.0" />

Answer 5

同じトピックについて他の人が投稿した、この問題に対するいくつかの良い回答を次に示します。

• ロビユーザー
• ベクター