javascript - 在 IOS 上固定位置和倾斜

Question

当倾斜 iPhone 或 iPad 时，我的网站出现固定位置问题。我已经阅读了很多关于 IOS 中固定定位的主题，但即使它在前一段时间是一个大主题，现在 IOS 的 Safari 似乎支持 CSS“position: fixed”(至少部分根据 http://caniuse.com/#search=fixed ).事实上它大部分时间都有效，但当我倾斜我的设备时，我还有一个问题。

我 body 里有:

<header>Title</header>
<main>Content</main>

和:

header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  height: 50px;
  padding: 0px 10px;
  width: inherit;
}

当我以横向查看我的网站时，滚动一下然后返回纵向，固定定位的元素(我的标题)最终位于页面中间，保持其横向大小。我只需手动滚动一下或触摸屏幕，一切就绪。

如何避免刚刚倾斜后显示错误？既然应该支持固定定位，我宁愿避免使用任何其他库，例如 iScroll。当屏幕调整大小时，我也尝试使用 jquery 滚动，但它不能完全工作。

$(window).resize(function(event) {
  var currentPosition = $(window).scrollTop();
  $(window).scrollTop(currentPosition+1);
});

在 IOS5 设备上使用这个解决方案，固定标题正确地保持在顶部，但是当从横向转换为纵向时，它保持其横向大小(在屏幕上触摸手动滚动使标题获得正确的大小) .

感谢您的帮助。

Answer 1

我做了一些实验，并解决了使用 meta viewport 标签时遇到的问题。我的头标签包含:

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

我试过:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />

现在我不再有错误的倾斜行为，缩放仍然被禁用。它似乎也适用于 android 以及顶部和底部固定位置。