Mengapa $(window).width() Berbeza daripada Hasil Pertanyaan Media, dan Bagaimana Saya Boleh Membetulkannya?

Percanggahan Antara $(window).width() dan Hasil Pertanyaan Media

Apabila menggunakan Twitter Bootstrap dan jQuery untuk memanipulasi elemen berdasarkan viewport lebar, anda mungkin menghadapi percanggahan antara hasil yang dikembalikan oleh $(window).width() dan lebar yang dikira dalam pertanyaan media CSS anda. Perbezaan ini menghalang penggunaan tepat gelagat responsif.

Isu ini berpunca daripada kemungkinan pengecualian lebar bar skrol dalam pengiraan $(window).width(). Untuk menyelesaikan masalah ini, satu penyelesaian yang dicadangkan ialah menggunakan $(window).innerWidth(), yang secara eksplisit menyertakan bar skrol.

Walau bagaimanapun, untuk pendekatan menyeluruh yang sejajar dengan pertanyaan media anda, pertimbangkan untuk menggunakan kaedah alternatif yang konsisten dengan pertanyaan media CSS.

Disyorkan Penyelesaian:

1. window.matchMedia():

   • Jika sokongan penyemak imbas untuk IE9 tidak menjadi kebimbangan, gunakan tetingkap .matchMedia(), yang sepadan sepenuhnya dengan pertanyaan media CSS. Sokongan penyemak imbasnya patut diberi perhatian: https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • Untuk keserasian dengan pelayar lama, gunakan kaedah mq Modernizr, yang menyokong semua penyemak imbas yang mentafsir pertanyaan media dalam CSS.

Dengan menggabungkan penyelesaian ini, anda boleh memastikan bahawa pengiraan lebar port pandang dalam kod jQuery dan pertanyaan media CSS anda diselaraskan dengan lancar.

Atas ialah kandungan terperinci Mengapa $(window).width() Berbeza daripada Hasil Pertanyaan Media, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!