14

我在 Safari 和 iOS6 中有一种罕见的行为。从横向更改为纵向时，视口会调整大小，但似乎没有正确水平定位。它向左偏移了 128 像素。

我可以使用 iOS6 中的 iPad3 重现此行为，访问 www.google.com

如果您像这样更改 html 的显示属性：

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

视口返回原点并正确显示。这就是为什么我认为这是一个错误。

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

4

5 回答 5

10

今天早上我注意到了一个类似的问题。

每当方向从横向更改为纵向时，整个主体元素都会向左移动几乎一半，此时它应该是 100% 宽度。这是 iOS 6 中的移动 Safari，在 iPhone 4s 上运行。

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

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

于 2012-09-20T18:46:31.773 回答
6

此错误也适用于 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);
    });
}
于 2013-02-07T17:24:05.470 回答
2

由于这个原因，我找到了解决方案： http ://www.tonylea.com/2010/safari-overflow-hidden-problem/

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

于 2012-09-25T09:04:31.807 回答
2

我有同样的错误，但在我的情况下，原因是input type=textwith width: 100%; 并且当我将输入包装器更改为overflow:hidden错误时已修复；

使用overflow:hiddenfor body 的解决方案不利于 iOS 上的惯性滚动

于 2012-12-26T15:42:54.340 回答
0

我不得不在 body 标签中添加溢出：隐藏。

于 2014-04-01T14:59:58.853 回答