在 Web 应用程序模式下，Mobile Safari 中的视口 META 标记是否损坏？
在使用 Safari 的 iPad 上，转到此页面： http://ifelse.org/projects/errors/viewport/test.html
这是来源：
<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>
它应该看起来像这样的图像，其中 1030 像素的视口在纵向模式下完全可见：
- 点击书签图标 (+)
- 点击添加到主屏幕
- 书签已创建。打开书签，网页将以 webapp 模式全屏打开。
viewport 标签基本上被忽略。我尝试了多种使用设备和混合像素值的变体。没有什么。
那么...这是一个错误，还是一个功能？
如果这是 Apple 故意的，那么本质上这意味着要正确开发美观的 Web 应用程序，您需要使用 768px 的实际宽度......？
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:
- Tap Bookmarks Icon (+)
- Tap Add to Home Screen
- A bookmark is created. Open the bookmark and web page will open in webapp mode with fullscreen.
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 ... ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不认为这既不是错误也不是功能。但这确实很烦人。
从 iOS4 开始，移动 safari 完全忽略网络应用模式下的
viewport元标记。在常规移动 Safari 模式下，它将自动计算确保显式内容宽度映射到设备宽度所需的比例因子。在网络应用程序模式下，它不再这样做，并且始终使用scale=1.0。因此，您要么必须切换到液体布局，并在viewport标记中设置width=device-width（这并不理想）。或者您必须使用 UIWebView 构建应用程序才能恢复正常行为。恕我直言，它极大地破坏了网络应用程序的功能。
Its neither a bug or a feature, I don't think. But it is really annoying.
As of iOS4, mobile safari completely ignores the
viewportmeta-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 setwidth=device-widthin yourviewporttag (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.