IOS上的固定位置和倾斜答案

【问题标题】：Fixed position and tilt on IOSIOS上的固定位置和倾斜
【发布时间】：2014-01-30 08:40:05
【问题描述】：

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

我体内有：

<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 设备上使用此解决方案时，固定标题正确地保持在顶部，但当从横向转换为纵向时，它会保持其横向大小（通过触摸屏幕手动滚动会使标题获得正确大小） .

感谢您的帮助。

【问题讨论】：

标签： javascript ios css uiwebview css-position

【解决方案1】：

我做了一些实验，并解决了我在使用元视口标签时遇到的问题。我的头部标签包含：

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

我试过了：

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

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

【讨论】：