Question

我遇到了一个非常顽固的iPad特定的错误，到目前为止我找不到解决方案。我正在使客户网站响应。在iPad上，网站宽度为纵向768px，横向为1130px。我正在用方向更改的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脚本但没有成功。

Answer 1

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

<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>

文本字段焦点/模糊后，方向更改的iPad视口缩放问题

1 个答案: