2015年更新

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：hidden;或者overflow-x: hidden;正如他所说。

Answer 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，并通过隐藏它并在10毫秒后显示它来强制重新流动body元素。它不依赖于任何<meta>标记或媒体查询。

你说，

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

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

建议在Safari 7中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">或其变体的答案不再恶化。这是一个demo。要确保您看到它不起作用，请从横向模式的iPad开始，加载页面，然后旋转。请注意，尽管一直使用flexbox，页面也不会扩展到全高。

将其与this page进行比较，我们在生产中使用hide / show body技术。

Answer 6

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

Answer 7

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

或试试这个：user-scalable=no

here is the ios documentation

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

7 个答案:

2015年更新