スクロールバーのある Firefox でメディア クエリが誤動作するのはなぜですか? mqGenie はどのように役立つのですか?

mqGenie を使用したスクロールバーのある Firefox での CSS メディア クエリの異常を解決する

メディア クエリは、さまざまな画面サイズに適応するレスポンシブ Web デザインを作成するために重要です。ただし、特に Firefox の CSS メディア クエリで問題が発生しています。

スクロールバーを引き起こす要素を扱う場合、Firefox ユーザーはメディア クエリが期待どおりに動作しない可能性があると報告しています。 Firefox でブラウザ ウィンドウを約 800 ピクセルに縮小すると、スクロールバーが表示されず、2 つの div が折りたたまれる場合があります。この問題は Chrome では発生しません。

この異常を解決するために、「mqGenie」JavaScript ライブラリを利用するという簡単な解決策が登場しました。プロジェクトの HTML ヘッドに mqGenie スクリプトを含めることで、スクロールバーの有無に関係なく、メディア クエリ幅がブラウザー (Firefox、Chrome、Safari、IE を含む) 間で一貫して機能することを保証できます。

mqGenieは、ビューポートの幅にスクロールバーの幅を含むブラウザで CSS メディア クエリを調整し、意図したサイズで実行できるように設計されています。これにより、Firefox のスクロールバーの問題が解決され、メディア クエリがすべての主要なブラウザで期待どおりに動作できるようになります。

mqGenie ライブラリを入手するには、次の場所にアクセスしてください:

http://stowball.github.io/ mqGenie/

以上がスクロールバーのある Firefox でメディア クエリが誤動作するのはなぜですか? mqGenie はどのように役立つのですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。