Mengapa $(window).width() dan Pertanyaan Media CSS Melaporkan Lebar Viewport Berbeza?

Lebar Viewport Diukur Secara Tidak Konsisten antara $(window).width() dan Pertanyaan Media CSS

Apabila menggunakan $(window).width jQuery () untuk menentukan lebar ruang pandang, anda mungkin menghadapi percanggahan dengan lebar yang dikira oleh media CSS pertanyaan. Perbezaan ini boleh dikaitkan dengan pelbagai faktor, termasuk lebar bar skrol penyemak imbas.

Untuk menyelesaikan isu ini, pertimbangkan untuk menggunakan window.matchMedia(). Kaedah ini menyediakan pengiraan lebar yang tepat yang konsisten dengan pertanyaan media CSS. Ia disokong oleh semua pelayar moden dan boleh dilaksanakan seperti berikut:

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

Penyelesaian Gantian menggunakan Modernizr:

Jika keserasian penyemak imbas membimbangkan, anda boleh menggunakan kaedah mq yang disediakan oleh Modernizr. Ia menyokong semua penyemak imbas yang memahami pertanyaan media.

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

Perhatikan bahawa menggunakan $(window).innerWidth() untuk mengira lebar port pandangan, sambil mengambil kira bar skrol, mungkin tidak selalu menjadi penyelesaian yang optimum kerana lebar bar skrol boleh berbeza-beza merentas penyemak imbas.

Atas ialah kandungan terperinci Mengapa $(window).width() dan Pertanyaan Media CSS Melaporkan Lebar Viewport Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!