Mengapa $(window).width() Berbeza daripada Titik Putus Pertanyaan Media?

Percanggahan Lebar Tetingkap Antara $(window).width() dan Pertanyaan Media

Dalam projek yang menggunakan Twitter Bootstrap dan CSS tersuai, percanggahan timbul antara nilai lebar viewport ditentukan oleh $(window).width() dan pertanyaan media. Walaupun menetapkan titik putus pertanyaan media pada 767px, $(window).width() secara konsisten mengembalikan nilai 16px kurang, menghasilkan pengiraan CSS yang tidak dijangka.

Punca dan Penyelesaian

Sebab utama untuk percanggahan ini ialah pengecualian lebar bar skrol dalam pengiraan $(window).width(). Untuk mengambil kira perkara ini, adalah disyorkan untuk menggunakan $(window).innerWidth(), yang menggabungkan lebar bar skrol. Walau bagaimanapun, pendekatan ini mungkin tidak sesuai jika tingkah laku yang konsisten dengan titik putus pertanyaan media diingini.

1. window.matchMedia() (Pelayar Moden Sahaja)

Jika anda boleh menyokong penyemak imbas moden tidak termasuk IE9, window.matchMedia() menyediakan penyelesaian yang lancar. Ia selaras sepenuhnya dengan pertanyaan media CSS dan memastikan konsistensi antara JavaScript dan CSS.

2. Kaedah mq Modernizr

Untuk sokongan pelayar yang lebih luas, kaedah mq Modernizr ialah pilihan yang berdaya maju. Ia mencontohi tingkah laku window.matchMedia() untuk penyemak imbas yang memahami pertanyaan media CSS.

Pelaksanaan

Untuk melaksanakan kaedah mq Modernizr:

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

Atas ialah kandungan terperinci Mengapa $(window).width() Berbeza daripada Titik Putus Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!