【问题标题】：page shifts to the left when rotating iPad from landscape to portrait将 iPad 从横向旋转到纵向时页面向左移动
【发布时间】：2011-12-07 06:36:31
【问题描述】：

我正在使用 CSS 媒体查询来创建一个具有响应式设计的网站。当我在 iPad 上以横向或纵向打开我的测试页面时，它看起来都很好。

但是，当我从横向模式切换到纵向模式时，页面会向左移动。我可以说正在加载正确的 CSS，因为页面上的其他内容发生了变化。我也可以将页面向右拖动，它的显示与我最初以纵向打开页面时完全一样。

我的视口设置为： meta id="view" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"

我添加了 JavaScript 来修复 iOS 视口缩放错误，该错误曾导致页面在从纵向切换到横向时被放大。（我使用了这里描述的解决方案：https://gist.github.com/901295）

我在从横向切换到纵向时遇到问题，无法找到该错误的名称。有其他人看到这个或知道如何解决吗？

【问题讨论】：

实际上是 What is the best method of re-rendering a web page on orientation change? 的副本 - 相同的底层证券。

标签： ipad orientation mobile-safari

【解决方案1】：

问题所有者说她“也可以将页面向右拖动，并且它看起来与我最初以纵向打开页面时完全一样。”
这让我觉得，由于某种未知原因（错误？），页面在方向更改为纵向模式时向左滚动（否则您将无法将其拖回）。

我遇到了类似的问题，并使用以下 JavaScript 解决方法解决了它：

// ...
// Optionally add a conditional here to check whether we are in Mobile Safari.
// ...
window.addEventListener('orientationchange', function() {
    if (window.orientation == 0 || window.orientation == 180) {
        // Reset scroll position if in portrait mode.
        window.scrollTo(0, 0);
    }
}, false);

也许这也适用于其他人。

【讨论】：

【解决方案2】：

我设法解决了我的类似问题 - 也许这对你有用？

您需要通过删除/恢复不同的位并重新测试页面来确定是特定 div 还是其他元素导致了它。解决后，尝试在 CSS 中为该元素添加 overflow: hidden 属性 - 我使用了 overflow-x: hidden，因为我的问题是水平滚动，但您可能需要更改它。

希望这是有用的......祝你好运！

【讨论】：

【解决方案3】：

Jereon，你的 JavaScript 为我工作。我的视口是：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,          minimum-scale=1, user-scalable=no" />

我正在使用 Drupal Corporate Clean 响应式主题。使用 Omega 响应式主题框架我没有遇到过这个问题。

【讨论】：

那行不通。有关演示，请参阅 my answer。

【解决方案4】：

@ellawson 提出的解决方案

问题是由于旋转设备时浏览器未正确缩放某些元素造成的。找到那个元素并应用溢出：隐藏；或overflow-x: hidden; 如他所说。

【讨论】：

【解决方案5】：

注意：这个问题是duplicate。我将在这里发布我的答案的要点。

2015 年更新

不幸的是，所有其他答案都不正确、过时或被误导。以下是有效的：

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

代码监听orientationchange event 并通过隐藏body 元素并在10 毫秒后显示它来强制重新流动。它不依赖于任何<meta> 标签或媒体查询。

你说，

当我在 iPad 上以横向或纵向打开我的测试页面时，它看起来都很好。但是，当我从横向模式切换到纵向模式时，页面会向左移动

这是关键。您只需要强制重新绘制body。

从 Safari 7 开始，建议添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 或其变体的答案不再适用。这是demo。为确保您了解它是如何工作的，请从 iPad 以横向模式开始，加载页面，然后旋转。请注意，尽管一直使用 flexbox，但页面并没有展开到全高。

将其与 this page 进行比较，我们在生产中使用隐藏/显示身体技术。

【讨论】：

谢谢。我遇到了响应式 html 表格脚本和手风琴的问题。这个脚本解决了这个问题。 +1

【解决方案6】：

我在 iPad 上遇到了这个问题并申请了 html { overflow-x:hidden; } 。这似乎解决了这个问题。

【讨论】：

【解决方案7】：

尝试将以下设置添加到您的内容属性中：maximum-scale=1

或试试这个：user-scalable=no

here is the ios documentation

【讨论】：

那行不通。有关演示，请参阅 my answer。