2

重複の可能性：
CSSメディアクエリ（スクロールバー）の問題

そのため、Firefoxではウィンドウ幅の計算にスクロールバーの幅が含まれていますが、Webkitには含まれていません。これにより、ブラウザ間で不整合が発生します。

技術的には、Firefoxがウィンドウ幅の一部としてスクロールバーを計算することで仕様に従っていることはわかっていますが、これは私には本当に直感に反しているようです。結局のところ、モバイルデバイスにはスクロールバーがなく、スクロールバーの幅はブラウザごとに、またはOSごとに異なります。

Firefoxがスクロールバーの幅を含めないようにするためにできることはありますか？おそらく、私のメディアクエリがブラウザ間で正しく起動できるようにするjQueryの一部ですか？

ありがとう。

4

1 に答える 1

1

メディア クエリを使用しているだけの場合、サイドバーからのオフセットはブラウザー間で違いはありません。

ただし、メディア クエリで jQuery を使用しようとすると、jQuery で返される幅が一貫しているため、いくつかの小さな問題が発生する可能性があり、オフセットが表示されます。

これを修正するには、Firefox ブラウザのサイドバーのオフセットを計算し、同期したいポイントからそれを引くだけです。すなわち

var scrollBarWidth = 0;
if ($.browser.mozilla)
  scrollBarWidth = window.innerWidth - jQuery("body").width();

その後、同期を指定すると...

if ($(window).width() < mediaQueryWidth - scrollBarWidth) {
  //act to do along with the media query
}

これが役に立ったことを願っています

于 2012-08-01T23:13:39.597 に答える