1

我正在构建一个使用固定位置元素的响应式站点。我注意到 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; }
}

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

4

1 回答 1

0

所以你的问题在于“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";
        }
      }

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

于 2013-07-15T19:16:43.790 回答