0

一部のブラウザーでは、メディア クエリの幅がビューポートの幅と同じではないというよく知られた問題があります (WebKit ブラウザーは、スクロールバーが表示されているときに CSS ビューポートのサイズを変更します)。body垂直スクロールバーを最初のラッパーから、またはhtml最初のラッパーに移動して問題を解決したかったdiv(stackoverflow で説明されているように: https://stackoverflow.com/a/10091608/1647291 )。

修正

CSSでの修正は次のとおりです。

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

垂直スクロールバーを最初の内側から、bodyまたはhtml最初のdiv内側に移動しbodyます。そのおかげで、メディア クエリでビューポートの幅を気にする必要はありません。

問題

しかし残念なことに、この優れた方法には 1 つの悪い副作用があります。iPad では (おそらく他のプラットフォームでも)、ページをスムーズにスクロールできません。画面に触れるのをやめると、すぐにスクロールが停止し、スムーズでゆっくりとしたイージングは​​ありません。

CSS を使用したこの単純なソリューションは、javascript を使用してビューポートをテストするすべての方法よりもはるかに単純で優れています。それらのいくつかはここで説明されていますが、信頼性が低く、サイトの動作が非常に遅くなります:

この CSS 修正を使用して、iPad を正しくスクロールさせる方法はありますか?

4

1 に答える 1

0

これを考えすぎている可能性があります。私たちは一日中ウェブサイトを作っていますが、これは問題ではありません。特定のピクセル幅について心配しすぎているのではないかと思います。680px 対 693px が大したことである場合、これは間違った方法で考えています。最初にモバイルを設計し、見苦しくなるたびに (ems を使用して) ブレークポイントを作成することをお勧めします。短いページと長いページを含むサイトの場合 (スクロールバーが表示され、スクロールバーがない場合にページ間をジャンプすることがあります)、これを追加するだけで終わりです。幸運を！

   html { overflow-y scroll }
于 2013-06-07T00:29:04.590 に答える