iphone - 位置 :fixed ios 6. 1 在定义视口(viewport)元标记时不起作用

Question

我正在构建一个使用固定位置元素的响应式网站。我注意到 iOS 6.1 中的一个奇怪错误，如果我为 meta viewport 标签定义了任何值，例如:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

然后我的固定位置元素执行经典的移动和跳回。如果我删除元标记，网站布局显然是错误的，但固定定位效果很好。

基本的 HTML/CSS:

<h1><span>My Title</span></h1>

h1{
    position: fixed;
    top:0;
    left:0;
    width: 100px;
    height: 100px;
    margin:0 !important;
    background: url(logo_mobile.png) no-repeat top left;
    background-size: 100%;
    z-index: 20;
    cursor: pointer;
    span{ display:none; }
}

这种行为是预期的吗？有办法解决吗？

Answer 1

所以您的问题出在“width=device-width”标签上。该标签可能会导致问题。尝试实现您自己的检测系统或使用开箱即用的检测系统，因为依赖视口(viewport)决定您的高度/宽度的内容在未来可能会很棘手。我正在尝试的一个概念是使用 javascript 重写标签并能够传递比依赖设备宽度更好的计算值:

      for (i=0; i<metas.length; i++) {
        if (metas[i].name == "viewport") {
          metas[i].content = "initial-scale=1, maximum-scale=1";
        }
      }

到目前为止，我已经取得了不错的成绩。希望对您有所帮助。