iPhone viewport meta tag change on homescreen link

Question

I have a web application that I had previously setup the meta tags needed to support the iPhone with a homescreen bookmark. The website worked fine in safari, and as the bookmark with the apple-mobile-web-app-capable set to yes so it removed the browser controls when you used the home screen link.

Now that the iPhone 5 is out, I realized that with the viewport settings I had on the page it was showing the site with black bars at the top and bottom of the screen. I have since changed my viewport meta tag so that it would use the full screen of the iPhone 5. However the only way for the home screen bookmark to use the new viewport tags and go full screen is to remove the bookmark, and re-add it.

Is there another way to set things up so that everyone that has the homescreen bookmark already installed will not need to remove, and re-add it for the site to go full screen?

Answer 1

This is the solution I found by Burlin on Gist. Works a treat. 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)" />