don*_*hoe 5 html viewport meta-tags ipad
在使用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>
它应该看起来像这个图像,其中viewport1030像素在纵向模式下完全可见:
该viewport标签基本上是忽略不计.我已经尝试了一些变异起诉设备和混合像素值.没有.
所以...这是一个错误,还是一个功能？
如果这是Apple的故意,它本质上意味着要正确开发漂亮的网页应用程序,您需要使用实际宽度为768px ...？
我不认为这既不是错误也不是功能。但这确实很烦人。
从 iOS4 开始，mobile safari 完全忽略viewportWeb 应用程序模式下的元标记。在常规移动 Safari 模式下，它将自动计算确保显式内容宽度映射到设备宽度所需的比例因子。在网络应用程序模式下，它不再这样做，并且始终使用scale=1.0。因此，您要么必须切换到液体布局并width=device-width在标签中进行设置viewport（这并不理想）。或者您必须使用 UIWebView 构建应用程序才能恢复正常行为。
恕我直言，它极大地破坏了网络应用程序的功能。