Mengapa $(window).width() Berbeza daripada Pengiraan Lebar Pertanyaan Media, dan Bagaimana Saya Boleh Menyelesaikan Percanggahan Ini?

Percanggahan antara $(window).width() dan Pengiraan Pertanyaan Media

Apabila menggunakan Twitter Bootstrap bersama gaya tersuai, isu biasa timbul apabila cuba mengubah susunan elemen berdasarkan saiz viewport menggunakan kedua-dua pertanyaan media CSS dan jQuery's $(window).width(). Dalam senario ini, masalahnya terletak pada perbezaan yang diperhatikan antara lebar yang dikira oleh $(window).width() dan lebar yang ditentukan oleh pertanyaan media CSS. Lazimnya, nilai lebar CSS adalah lebih kecil sedikit, mewujudkan percanggahan yang boleh membawa kepada kedudukan elemen yang salah.

Punca dan Penyelesaian Kemungkinan:

Satu potensi punca percanggahan ini ialah pengecualian lebar bar skrol dalam pengiraan $(window).width(). Untuk menyelesaikan masalah ini, cuba gunakan $(window).innerWidth() sebaliknya, yang merangkumi lebar bar skrol. Walau bagaimanapun, ini mungkin bukan penyelesaian yang ideal, kerana lebar bar skrol berbeza-beza merentas penyemak imbas.

Penyelesaian yang lebih dipercayai ialah menggunakan fungsi window.matchMedia(), yang menyediakan pengiraan yang konsisten bagi lebar port pandangan dan sepenuhnya serasi dengan pertanyaan media CSS. Kod berikut menunjukkan penggunaannya:

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Untuk penyemak imbas lama yang tidak menyokong window.matchMedia(), pertimbangkan untuk menggunakan kaedah mq yang disediakan oleh perpustakaan Modernizr. Kaedah ini menawarkan sokongan menyeluruh untuk penyemak imbas yang memahami pertanyaan media dalam CSS:

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

Dengan menggunakan kaedah alternatif ini, anda boleh memastikan konsistensi antara pertanyaan media CSS anda dan pengiraan lebar jQuery, menyelesaikan percanggahan yang boleh timbul daripada variasi saiz port pandangan.

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