Bagaimanakah Saya Boleh Mendapatkan Lebar Pelayar dengan Tepat dalam JavaScript, Mengendalikan Kes Edge?

Dapatkan Lebar Penyemak Imbas dengan JavaScript, Termasuk Kes Edge

Mendapatkan lebar penyemak imbas semasa dengan JavaScript boleh menjadi mudah, tetapi penting untuk mempertimbangkan kelebihan kes untuk memastikan ukuran yang tepat. Mari terokai penyelesaian:

Kod yang anda nyatakan untuk mendapatkan lebar penyemak imbas menggunakan document.body.offsetWidth boleh gagal jika elemen badan mempunyai lebar yang ditetapkan kepada 100%. Ini kerana elemen badan akan mengembang untuk memenuhi ruang mendatar yang tersedia, mengakibatkan ukuran yang tidak tepat.

Untuk menangani perkara ini, pertimbangkan perkara berikut fungsi:

function getBrowserWidth() {
  return Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  );
}

Penjelasan:

• document.documentElement.clientWidth: Sifat ini mengembalikan lebar dalaman tetingkap dalam piksel, termasuk lebar bar skrol menegak jika ia ada. Walau bagaimanapun, ia tidak termasuk bar skrol mendatar.
• window.innerWidth: Sifat ini mengembalikan lebar dalaman tetingkap dalam piksel, termasuk sebarang bar skrol mendatar.

Cara ia Berfungsi:

Fungsi cuba dahulu untuk menggunakan document.documentElement.clientWidth sebagai kaedah pilihan. Jika nilai ini tidak tersedia atau mengembalikan 0, ia akan kembali ke window.innerWidth untuk mengambil kira sebarang bar skrol mendatar.

Faedah:

• Mengalamatkan tepi sarung badan dengan lebar 100%.
• Menyediakan ukuran lebar penyemak imbas yang tepat walaupun dengan bar skrol mendatar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Lebar Pelayar dengan Tepat dalam JavaScript, Mengendalikan Kes Edge?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!