Question

在使用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>

它应该看起来像这个图像，其中10 {3}像素的viewport在纵向模式下完全可见：

点按书签图标（+）
点按添加到主屏幕
创建书签。打开书签，网页将以全屏模式在webapp模式下打开。

viewport标记基本上被忽略了。我已经尝试了一些变异起诉设备和混合像素值。什么都没有。

所以...这是一个错误还是一个功能？

如果这是Apple的故意，那么它本质上意味着要正确开发漂亮的网页应用，你需要使用实际宽度为768px ......？

Answer 1

它不是一个错误或一个功能，我不认为。但它真的很烦人。

从iOS4开始，移动版Safari完全忽略了网络应用模式中的viewport元标记。在常规移动野生动物园模式中，它将自动计算确保显式内容宽度映射到设备宽度所需的比例因子。在web-app模式下，它不再执行此操作，并始终使用scale = 1.0。因此，您必须切换到流畅的布局，并在width=device-width标记中设置viewport（这不太理想）。或者您必须使用UIWebView构建应用程序以恢复正常行为。

它显着打破了网络应用功能，恕我直言。

在webapp模式下，移动Safari中的视口META标记是否已损坏？

1 个答案: