Bagaimanakah Saya Boleh Menentukan Dimensi Port Pandangan Penyemak Imbas dengan Tepat dalam JavaScript?

Menentukan Dimensi Viewport Penyemak Imbas

Untuk pengalaman pengguna yang dioptimumkan, adalah penting untuk memenuhi pelbagai resolusi skrin peranti dan saiz viewport. Ini membolehkan anda memberikan imej berkualiti tinggi tanpa mengorbankan kejelasan atau mengherotkan perkadaran. Untuk mencapai matlamat ini, mari kita terokai dua pendekatan JavaScript untuk mendapatkan semula dimensi port pandangan penyemak imbas dengan tepat.

1. Cross-Browser @media Values

Kaedah ini menggunakan pertanyaan media CSS @media untuk mendapatkan dimensi port pandangan penyemak imbas. Dengan membuat pertanyaan untuk maksimum pelbagai ukuran port pandangan, kami boleh mengambil kira perbezaan merentas penyemak imbas dan peranti.

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight | |. 0);

2. Sifat Tetingkap dan Dokumen

Sebagai alternatif, kami boleh memanfaatkan sifat tetingkap dan dokumen tertentu untuk mendapatkan ukuran viewport.
window.innerWidth dan window.innerHeight
 

Sifat ini mendapatkan semula port pandangan dimensi, termasuk bar skrol. Walau bagaimanapun, ia mungkin dipengaruhi oleh tetapan zum dan tidak disokong dalam Internet Explorer 8 atau lebih awal.
document.documentElement.clientWidth dan .clientHeight

Sifat ini mewakili port pandangan penyemak imbas tolak lebar bar skrol. Ia sepadan dengan nilai @media apabila tiada bar skrol hadir dan ia serasi merentas penyemak imbas.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menentukan Dimensi Port Pandangan Penyemak Imbas dengan Tepat dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!