Question

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

<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”标签。该标记可能会导致问题。尝试实现自己的检测系统或使用开箱即用的检测系统，因为依赖于视口确定您的高度/宽度将来可能会变得棘手。我正在使用的一个概念是使用javascript重写标记，并且能够传递比依赖于设备宽度更好的计算值：

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

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

position：修复ios 6.1在定义视口元标记时不起作用

1 个答案: