5

在使用 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 像素在纵向模式下完全可见：

  1. 点击书签图标(+)
  2. 点击添加到主屏幕
  3. 创建书签。打开书签，网页将以 webapp 模式全屏打开。

该viewport标签基本上被忽略了。我已经尝试了多种使用设备和混合像素值的变体。没有。

那么......这是一个错误还是一个功能？

如果这是 Apple 有意为之，那么它本质上意味着要正确开发美观的 Web 应用程序，您需要使用 768px 的实际宽度...？

4

1 回答 1

4

我不认为它既不是错误也不是功能。但这真的很烦人。

从 iOS4 开始，移动 safari 完全忽略了viewportweb-app 模式中的元标记。在常规移动 safari 模式下，它将自动计算确保显式内容宽度映射到设备宽度所需的比例因子。在 web-app 模式下，它不再这样做，并且始终使用 scale=1.0。因此，您要么必须切换到流动布局并width=device-width在viewport标签中设置（这并不理想）。或者您必须使用 UIWebView 构建应用程序才能恢复正常行为。

恕我直言，它严重破坏了网络应用程序功能。

于 2011-01-03T22:37:23.230 回答