主屏幕链接上的 iPhone 视口元标记更改答案

【问题标题】：iPhone viewport meta tag change on homescreen link主屏幕链接上的 iPhone 视口元标记更改
【发布时间】：2012-10-10 18:43:30
【问题描述】：

我有一个网络应用程序，我之前设置了支持带有主屏幕书签的 iPhone 所需的元标记。该网站在 safari 中运行良好，并且作为将 apple-mobile-web-app-capable 设置为 yes 的书签，因此当您使用主屏幕链接时它删除了浏览器控件。

现在 iPhone 5 已经推出，我意识到通过页面上的视口设置，它显示的网站在屏幕顶部和底部带有黑条。我已经更改了我的视口元标记，以便它可以使用 iPhone 5 的全屏。但是，主屏幕书签使用新的视口标签并全屏显示的唯一方法是删除书签，然后重新添加它。

是否有另一种设置方法，以便已安装主屏幕书签的每个人都不需要删除并重新添加它以使网站全屏显示？

【问题讨论】：

标签： iphone viewport homescreen

【解决方案1】：

这是 Burlin 在 Gist 上找到的解决方案。工作一种享受。 https://gist.github.com/3840737

<!-- standard viewport tag to set the viewport to the device's width
  , Android 2.3 devices need this so 100% width works properly and
  doesn't allow children to blow up the viewport width-->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<!-- width=device-width causes the iPhone 5 to letterbox the app, so
  we want to exclude it for iPhone 5 to allow full screen apps -->
<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />

【讨论】：

这很酷，但是您包含两个相同的 ID 的目的是什么？