iOS6 Safari方向更改错误？

Question

我在Safari和iOS6中有一种罕见的行为.从横向更改为纵向时,视口会调整大小,但似乎没有正确水平放置.它向左移动了128px.

我可以使用iOS6中的iPad3重现这种行为,访问www.google.com

如果您更改html的display属性,如下所示:

document.querySelector("html").style.display ="none"document.querySelector("html").style.display ="block"

视口返回原点并正确显示.这就是我认为这是一个错误的原因.

任何想法如何解决这一问题？

Answer 1

今天早上我注意到了类似的问题.

任何时候方向从横向变为纵向,整个身体元素将几乎向左移动一半,当它应该是100%宽度.这是iOS 6中的移动游猎,在iPhone 4s上运行.

我把它钉在了我的全宽搜索栏上.在这个栏的父元素上,我放置了一个属性overflow: hidden;

这最终解决了我的问题.我花了很长时间检查其他网站,这可能无法解决您的问题.例如,我的修复程序似乎没有采用BestBuy.com,它也遇到了同样的问题.

Answer 2

此错误也适用于iPhone上的IOS6.

删除和读取orientationchange处理程序中的占位符将解决问题.这个解决方案是特定于jQuery的:

$(window).on("orientationchange", fixIOS6PlaceholderBug);

function fixIOS6PlaceholderBug () {
    var $this,
        originalPlaceholder = "";

    $(document).find("input[placeholder]").each(function() {
        $this = $(this);
        originalPlaceholder = $this.attr("placeholder");
        $this.removeAttr("placeholder").attr("placeholder", originalPlaceholder);
    });
}

Answer 3

我找到了解决方案： http://www.tonylea.com/2010/safari-overflow-hidden-problem/

我的 HTML 标记中有溢出：隐藏，因为我左右隐藏了一些旋转 DIV，但 iOS6 中的 Safari 似乎不接受这一点。设置位置：相对于 HTML 标签解决了我的问题！