将 iPad 从横向旋转为纵向时页面向左移动

Question

我正在使用 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 ）

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

Answer 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);

也许这也适用于其他人。

Answer 2

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

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

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

Answer 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 响应式主题框架没有遇到这个问题。

Answer 4

解决方案是由 @ellawson 提出的。

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

Answer 5

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

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 事件并强制重新通过隐藏 body 元素并在 10 毫秒后显示它来控制其流程。它不依赖于任何标签或媒体查询。

你说，

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

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

从 Safari 7 开始，建议添加 或其变体的答案不再令人担忧。这是一个演示。为了确保您明白它是如何不起作用的，请从 iPad 的横向模式开始，加载页面，然后旋转。请注意，尽管一直使用 Flexbox，但页面并未扩展到完整高度。

与此页面进行比较，我们在生产中使用隐藏/显示正文技术。

Answer 6

我在 iPad 上遇到了这个问题，并应用了 html { Overflow-x:hidden; } 。这似乎已经解决了问题。

Answer 7

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

或尝试以下操作：user-scalable=no

这里是 ios 文档