3

サイドバーをレンダリングしたい。私の CSS は、デスクトップ ブラウザーでレンダリングすると、ズームインしてもかなりうまく機能します。ただし、iOS デバイスでは、ページを (ピンチしてズームして) ズームインすると、コンテンツの上にサイドバーがレンダリングされます。最後に確認したところ、デフォルトの Android ブラウザーと Chrome ベータ版で同じ動作が得られたことを覚えています。

この動作を説明する (ほとんど) 最小限のデモ ページを作成しました。

ただし、モバイル 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

ヘッダーに固定された位置を取り出してみてください。実際にはテストできません。フィドルで試してみましたが、ズームが期待どおりに機能していないようです。ただし、ヘッダータグが左側に固定されている場合は、左側に配置するのが理にかなっています。iOSはズームをウィンドウのサイズ変更などとして扱っているようです。そのため、CSSに反応などを強制します。

于 2012-07-04T20:01:35.357 に答える
0

秘訣は、ナビゲーション要素 (「ヘッダー」) にメイン コンテンツよりも小さい z-index を与えるだけでなく、-3 のような負の z-index を与えることです。メイン コンテンツの div に +4 などの z-index を指定します。

Mobile Safari でメイン コンテンツをズームインすると、ナビゲーション要素は以前と同じように表示されますが、再度ズームアウトするまでメイン コンテンツの背後に隠れます。

楽しむ！

編集: ネガティブは、リンクが触れられなくなるため、あまり良い考えではありません。少なくとも私の場合は ;-)

編集 2: z-index は、位置プロパティが明示的に絶対、固定、または相対に設定されている要素に対してのみ Mobile Safari で機能するようです。

于 2013-04-30T18:01:38.440 に答える