Menu
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?
625
What does “The initial scale in the viewport meta tag is not working” mean? This means that the URL in question does not contain the initial scale in the HTML document. Or, this element is on the page, but you set it to a value other than 1.0.
Default Viewport Settings The default width is 980 pixels. However, these defaults may not work well for your webpages, particularly if you are tailoring your website for a particular device.
Use `viewport-fit=cover` to fill the whole screen.
The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.
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)" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
