0

我遇到了一个非常顽固的特定于 iPad 的错误，到目前为止我还没有成功找到解决方案。我正在使客户网站响应。在 iPad 上，站点宽度为纵向 768 像素和横向 1130 像素。我正在使用 JavaScript 在方向更改时更新视口元标记；这些是由 JS 生成的视口元标记：

肖像：<meta name="viewport" content="width=768,minimum-scale=1, maximum-scale=1, initial-scale=1">

景观：<meta name="viewport" content="width=1130,minimum-scale=0.9061946902654867, maximum-scale=0.9061946902654867, initial-scale=0.9061946902654867">

我知道禁用用户控制的缩放会引起一些注意；然而，经过多次测试，这是唯一始终适用于方向变化的配置。

在方向更改之间一切正常，除了在以下情况下：

1）点击以编辑任一方向的任何文本字段

2）关闭虚拟键盘

3) 改变 iPad 的方向

在横向中，布局超出视口（放大）；在纵向中，布局比视口窄（缩小）。但是，如果您再次单击任何文本字段，则会恢复正确的比例。

我在http://735.es/ipad/上设置了这个问题的基本演示。如果您在 iPad（不是模拟器）上完成上述步骤，则问题应该很容易识别。

感谢您的任何反馈！

编辑

这肯定与我在方向更改之间的视口元标记中使用不同比例的事实有关：当我将横向视口宽度设置为 1024（比例为 1）而不是 1130 时，这个问题就消失了。此外，我已经尝试使用 scottjehl/iOS-Orientationchange-Fix.js 脚本但没有成功。

4

1 回答 1

0

我不知道它是否会起作用，但我遇到了同样的问题，这个脚本帮助了我。我在互联网上找到了它，但现在不记得 URL，而是脚本。

<script type="text/javascript">
    (function(doc) {

        var addEvent = 'addEventListener',
            type = 'gesturestart',
            qsa = 'querySelectorAll',
            scales = [1, 1],
            meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

        function fix() {
            meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
            doc.removeEventListener(type, fix, true);
        }

        if ((meta = meta[meta.length - 1]) && addEvent in doc) {
            fix();
            scales = [.25, 1.6];
            doc[addEvent](type, fix, true);
        }

    }(document));
</script>
于 2013-09-07T10:14:59.533 回答