logo标签列表

当将iPad从横屏旋转到竖屏时，页面向左移。

ipadorientationmobile-safari
8
我正在使用CSS媒体查询创建具有响应式设计的网站。当我在iPad上以横向或纵向方向打开我的测试页面时，它看起来很好。
但是，当我从横向模式切换到纵向模式时，页面会向左移动。我可以确定正确的CSS正在加载，因为页面上的其他元素也在改变。我还可以将页面向右拖动，它将与最初以纵向打开页面时完全相同。
我已经将视口设置为： 我添加了JavaScript来修复iOS视口缩放错误，这曾导致在从纵向切换到横向时页面被放大。（我使用了这里描述的解决方案：https://gist.github.com/901295）
我遇到了从横向切换到纵向时出现的错误名称。还有其他人遇到过这种情况吗？如何解决？
这实际上是如何重新渲染网页以响应方向变化的最佳方法？的重复 - 有着相同的基础。 - Dan Dascalescu
7个回答
4
问题所有者说：“我也可以将页面向右拖动，它的显示效果与我最初在纵向打开页面时一样。” 这让我想到，由于某种未知原因（错误？），在方向变为纵向模式时，页面会向左滚动（否则您无法将其拖回）。
我曾遇到类似问题，并通过以下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);

也许这个方法也适用于其他人。
3
我成功解决了类似的问题 - 或许这对你有用？
你需要找出是哪个特定的div或其他元素引起了问题，通过删除/恢复不同的部分并重新测试页面来确定。一旦你找到了问题所在，请尝试在CSS中为该元素添加overflow: hidden属性 - 我使用了overflow-x: hidden，因为我的问题是水平滚动，但你可能需要进行调整。
希望这对你有用...祝你好运！
2

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

那不起作用。请参见我的答案以获取演示。 - Dan Dascalescu
2
注：这个问题是一个重复。我会在这里发布我的答案要点。

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毫秒后显示来强制重新布局。它不依赖于任何 <meta> 标签或媒体查询。
你说过：

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

这很关键。你只需要强制重新绘制 body 即可。
建议添加像 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这样的代码的回答在 Safari 7 中已经不再适用。这里有一个 演示。为了确保您了解它不起作用的方式，请从 iPad 横向模式开始，加载该页面，然后旋转。请注意，尽管全部使用了 flexbox，页面仍无法展开到全高。

与 此页面 相比，我们在产品中使用隐藏/显示 body 技术。

1
谢谢。我在使用响应式HTML表格脚本和手风琴时遇到了问题。这个脚本解决了我的问题。+1 - Progrower
2
这个问题的解决方案如@ellawson所提出的那样。当设备旋转时，浏览器未正确缩放某些元素，导致问题的出现。找到该元素并应用overflow: hidden; 或 overflow-x: hidden;，正如他所说的那样。
-1
我在 iPad 上遇到了这个问题，并应用了 html { overflow-x:hidden; }。这似乎解决了这个问题。
-2

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

或者尝试这个：user-scalable=no

这里是 iOS 文档

那不起作用。请参见我的答案以获取演示。 - Dan Dascalescu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接