HTML 5 iPhone 5 support question
I know this really isn't a jquery mobile question. But I haven't really found any good forums to ask my question on, and my site does use jquery. So maybe there is a solution I can use in jquery to my problem.
My site is fairly simple jquery mobile and php based. The site works fine on iphones. However with the release of the iPhone 5 I have noticed an issue.
Previously my site used the following code:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
That worked fine when viewing the site from a home screen bookmark on the iPhone 3G, 4, and 4S. However with the latest iPhone 5's the site comes up smaller then the screen with black bars at the top and bottom. To fix the issue I just removed the width=device-width attribute from the viewport tag. This fixed the issue for any new iphones that created a homescreen bookmark. However any iPhone 5's that already had a bookmark, no matter how many times the site gets loaded and cache cleared on the phone the bookmark still has the black bars. Is there any way to get the bookmark to load the new information without actually making the users remove the bookmark and add it back?
I'm guessing that there really isn't much of a way jquery could override that, and I might just need to make my users remove their old bookmarks and re-add them. But thought I would check.
I've also wondered the same thing about if I change bookmark image referenced in the rel="apple-touch-icon" tag. If I change that, will users bookmarks get updated to the new image? Or will they need to remove the bookmark and re-add it to get it updated.
Again sorry for asking a not very jquery related question but if there is a way it can help me around having to make people remove their homescreen icons and re-add them that would be great.
thanks.