Menu
On an iPad using Safari, go to this page: http://ifelse.org/projects/errors/viewport/test.html
This is the Source:
<html>
<head>
<title>Viewport Test</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=1030" />
<style>
body {
padding: 0;
margin: 0;
}
#test {
width: 1024px;
height: 500px;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<div id="test">
<p>This is 1024 with a 3px border, so device width is 1030.</p>
<p>Works when viewing in Mobile Safari.</p>
<p>Does not work if you Bookmark it to the Home Screen and open from there.</p>
<p>Compare <a href="viewport_1030_safari.png">MobileSafari</a> view to <a href="viewport_1030_webapp.png">Webapp</a> view.</p>
</div>
</body>
</html>
It should look like this image where the viewport of 1030 pixels is fully visible in Portrait mode:
The viewport tag is essentially ignored. I've tried a number of variation suing device-with and mixed pixel values. Nothing.
So... is this a bug, or a feature?
If this is intentional on the part of Apple, it essentially it means to properly develop nice looking web apps you need to go with an actual width of 768px ... ?
224
Its neither a bug or a feature, I don't think. But it is really annoying.
As of iOS4, mobile safari completely ignores the viewport meta-tag in web-app mode. In regular mobile safari mode, it will auto-calculate the scale factor needed to make sure the explicit content width is mapped to the device-width. In web-app mode it no longer does this, and always uses scale=1.0. So you either have to switch to a liquid layout and set width=device-width in your viewport tag (which isn't ideal). Or you have to build an app using UIWebView to restore the normal behavior.
It significantly breaks the web-app functionality, IMHO.
146
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
