3

我想渲染一个侧边栏。我的 CSS 在桌面浏览器上呈现时效果很好，即使我放大也是如此。然而，在 iOS 设备上，放大页面（通过捏合缩放）会在内容上呈现侧边栏。最后我检查了一下，我记得在默认的 Android 浏览器和 Chrome Beta 上得到了相同的行为。

我建立了一个（大部分）最小的演示页面来说明这种行为：http ://www.seas.upenn.edu/~dange/test/test.html

但是，如果您使用移动浏览器（例如移动 Safari）访问，我们会得到以下信息： iOS 屏幕截图

这是用于呈现该页面的 CSS：

/* Sidebar */

header {
  border-right: 1px solid #AAA;
  float: left;
  padding: 0 10px;
  position: fixed;
  width: 200px;
  bottom: 0;
  left: 0;
  right: auto;
  top: 0;
}

#site-title {
  font: bold 36px sans-serif;
  margin: 1em 0;
  text-align: center;
}

/* Navigation menu in sidebar */

nav {
  font: 18px sans-serif;
  margin: 2em auto;
  width: 140px;
}

    nav > ul {
      list-style: none;
      padding: 0 10px;
    }

    nav li {
      margin: 0;
      text-align: center;
    }

    nav a {
      display: block;
      padding: 8px 10px;
      text-decoration: none;
    }

/* Content "Pane" */

#content,
footer {
  margin-left: 220px;
  max-width: 620px;
  padding: 0 10px;
  position: relative;
}

#content p {
  font: 18px / 30px serif;
}

footer {
  border-top: 1px solid #AAA;
  font: 14px serif;
}

...和一个简化的 HTML 文档：

<body>
  <header>
    <h1 id="site-title">Lorem Ipsum</h1>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </nav>

  </header>

  <section id="content">
    <article>
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </article>
  </section>

  <footer>
    <p>...</p>
  </footer>
</body>

我知道这不是移动浏览器的最佳布局（我确实计划改进我的实际站点，以便它在移动设备上看起来不错）。但与此同时，我确实想摆脱这个问题。

4

3 回答 3

0

通过在 body 标记内使用包装器，我已经在我的网站上解决了类似的问题。

#wrapper{
     width:840px;
     overflow:auto;
}

但我认为移动侧边栏不是一个好主意，除非它可以动态隐藏。在移动设备上，最好将侧边栏堆叠在内容之上：

@media (max-width: 480px) {
     #content, nav{width:100%; margin:10px 0; position:relative;}
}

以上未经测试。

于 2013-04-30T12:15:00.233 回答
0

尝试取出为标题固定的位置，我无法真正测试它，在小提琴上尝试过，但缩放似乎不像我预期的那样工作。但是如果您的标题标签固定在左侧，那么将它放在左侧是有意义的。似乎iOS将缩放视为调整窗口大小或其他东西，因此它迫使css做出反应或类似的东西

于 2012-07-04T20:01:35.357 回答
0

诀窍是给导航元素（“标题”）不仅比主要内容的 z-index 小，而且给它一个负 z-index，如 -3。给主要内容 div 的 z-index 为 +4 或其他。

现在，当您使用 Mobile Safari 放大主要内容时，导航元素仍会像以前一样存在，但会隐藏在主要内容后面，直到您再次缩小。

玩得开心！

编辑：否定不是一个好主意，因为它使链接无法触及。至少在我的情况下;-)

编辑 2：z-index 似乎仅在其位置属性已明确设置为绝对、固定或相对的元素上适用于 Mobile Safari。

于 2013-04-30T18:01:38.440 回答