iPhone 5的主屏幕网页应用的适配高度

Question

我在适配Web应用（主屏）高度方面遇到了问题。 我使用以下元标签:

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

我的问题是屏幕上方和下方有黑色的边框。一开始我以为这是iPhone 5的一个bug，因为它具有更高的屏幕。但今天我看到一个Web应用程序（apps.ft.com/），它完美地适配了iphone5的屏幕。

有什么想法，我做错了什么吗？

这是我全部相关的 meta 标签：

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

编辑： 经过一小时的搜索，我找到了解决方案，可以强制浏览器适应全高度。 只有当我定义一个启动图像（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">

- mr_app

---

你的意思是第一张启动图片链接中的iPhone 4（Retina）吗？ - Crashalot

这个代码修改解决了问题吗？ - wargodz009

Answer 1

我也为此努力了几个小时，最终发现是视口 meta 标签中的“width”定义导致了这个问题！删除 width 就解决了我的问题。

- user2577633

Answer 2

使用这个

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

关于启动图片和触控图标，请参考以下链接： iOS Web应用程序的多个“apple-touch-startup-image”分辨率（尤其是针对iPad）？

;)

- Marco Allori

---

尽管这个答案获得了3个赞，但所给出的解决方案是错误的。问题明确讨论了一个主屏幕网络应用程序，在此情况下，“initial-scale=1.0”无法帮助去除黑色边框。 - gillesruppert

此解决方案无法解决问题。 - Roland

然而，对于我来说，它占用了整个 iPhone 5 的高度和宽度，而不是较小的 iPhone 3/4 屏幕尺寸（移除黑色条纹，顶部和底部） - 而且没有使用启动图像。 - BananaAcid

Answer 3

完全删除视口宽度会引起更多问题，而不是解决问题。为了使 Web 应用程序具有正确的视口高度，视口宽度需要大于 320（不幸的是，这是 device-width 向浏览器报告的值）。这是我更新视口元标记的方式：

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

- Tim Hettler

Answer 4

我也遇到过这个问题，我通过删掉 width=device-width 来解决它

- Daniel

Answer 5

以下是一些其他用户在同一主题中发表的好答案：

• roviuser
• Vector

- Roland