CSS没有'；放大时无法在iOS上正确渲染_Css_Mobile Safari

CSS没有'；放大时无法在iOS上正确渲染

css

CSS没有'；放大时无法在iOS上正确渲染,css,mobile-safari,Css,Mobile Safari,我想渲染一个侧边栏。我的CSS在桌面浏览器上渲染时效果非常好，即使在放大时也是如此。但是，在iOS设备上，放大页面（通过收缩缩放）会在内容上呈现侧边栏。上次我检查时，我记得在默认的Android浏览器和Chrome测试版上得到了相同的行为我建立了一个（大部分）最小的演示页面来演示这种行为：但是，如果您使用移动浏览器（如mobile Safari）进行访问，我们会发现：以下是用于呈现该页面的CSS： /* Sidebar */ header { border-right: 1px s

我想渲染一个侧边栏。我的CSS在桌面浏览器上渲染时效果非常好，即使在放大时也是如此。但是，在iOS设备上，放大页面（通过收缩缩放）会在内容上呈现侧边栏。上次我检查时，我记得在默认的Android浏览器和Chrome测试版上得到了相同的行为

我建立了一个（大部分）最小的演示页面来演示这种行为：

但是，如果您使用移动浏览器（如mobile Safari）进行访问，我们会发现：

以下是用于呈现该页面的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>


乱数假文

我知道这并不是移动浏览器的最佳布局（我确实计划改进我的实际站点，使其在移动设备上看起来更漂亮）。但与此同时，我确实想解决这个问题。

尝试去掉固定的头部位置，我无法真正测试它，在小提琴上尝试过，但缩放效果似乎与我预期的不一样。但是如果你的标题标签固定在左边，那么它应该在左边。iOS似乎将缩放视为调整窗口大小之类的东西，因此它会强制css做出反应或类似的事情

我已经通过在body标签内使用包装器修复了我的站点上的类似问题

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

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

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

上述内容未经测试。

诀窍在于给导航元素（“标题”）的z索引不仅要比主要内容少，而且要给它一个负的z索引，如-3。给主要内容div一个z-索引+4或任何值

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

玩得开心

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

编辑2：z-index似乎只在位置属性被显式设置为绝对、固定或相对的元素上才适用于Mobile Safari。

可能值得使用em而不是px。我为什么要这样做？（严肃的问题）像素应该是指实际的像素，当你有超高清显示器时，这些像素没有多大意义。这不会解决您的问题，但它是处理各种屏幕分辨率时的最佳实践。阅读。在我的例子中，标题的固定位置是理想的：-）你提到的“溢出”给了我灵感，并提醒我，我已经为两个div使用了z索引。诀窍在于，不仅要给导航设置一个比主要内容少的z索引，还要给导航设置一个负的z索引。对于这个灵感，你会得到+50。恭喜！