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

Question

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

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

我将视口(viewport)设置为:
meta id="view"name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0"

我添加了 JavaScript 来修复 iOS 视口(viewport)缩放错误，该错误曾导致页面在从纵向切换到横向时被放大。 (我使用了这里描述的解决方案: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);

也许这也适用于其他人。