Bagaimana Saya Boleh Memantau Saiz Tetingkap Penyemak Imbas dengan JavaScript?

Memantau Saiz Tetingkap Penyemak Imbas dengan JavaScript

Keupayaan untuk bertindak balas terhadap peristiwa mengubah saiz tetingkap dalam JavaScript adalah penting untuk mencipta aplikasi web responsif yang menyesuaikannya susun atur dan kefungsian kepada saiz skrin yang berbeza. Artikel ini memberikan penjelasan terperinci tentang cara menyambung ke acara ubah saiz tetingkap penyemak imbas, menyediakan kedua-dua JavaScript vanila dan pendekatan alternatif.

Penyelesaian JavaScript Vanila

Pendekatan yang disyorkan untuk menangkap acara ubah saiz adalah untuk menambah pendengar kepada acara ubah saiz:

window.addEventListener('resize', function(event) {
    // Your code here
}, true);

Kaedah ini memastikan gangguan yang minimum dengan pendengar acara sedia ada dan menyediakan kawalan terperinci ke atas pengendalian acara.

Pendekatan Alternatif

Penyelesaian alternatif adalah untuk menetapkan fungsi terus kepada sifat onresize bagi objek tingkap. Walau bagaimanapun, kaedah ini hanya boleh mempunyai satu pengendali dan mungkin mengganggu mana-mana pendengar acara sedia ada:

window.onresize = function(event) {
    // Your code here
};

Pertimbangan Konsisten

jQuery boleh melakukan kerja tambahan untuk memastikan penembakan yang konsisten acara ubah saiz merentas penyemak imbas yang berbeza. Walau bagaimanapun, adalah disyorkan untuk menguji kod anda secara menyeluruh dalam pelbagai penyemak imbas, seperti Firefox, Safari dan Internet Explorer, untuk mengambil kira kemungkinan ketidakkonsistenan.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Memantau Saiz Tetingkap Penyemak Imbas dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!