Bagaimanakah Saya Boleh Mendapatkan Dimensi Port Pandangan Penyemak Imbas Menggunakan JavaScript?

Cara Mendapatkan Dimensi Port Pandangan Penyemak Imbas

Latar Belakang:

Pelayar memaparkan kandungan dalam kawasan yang ditetapkan dikenali sebagai "port view". Kawasan ini tidak termasuk bar alamat, bar alat dan elemen UI lain. Dalam senario tertentu, pembangun mungkin perlu menentukan saiz tepat port pandang untuk menawarkan pengguna pengalaman tontonan yang optimum.

Penyelesaian:

Terdapat beberapa kaedah untuk mendapatkan semula dimensi port pandangan penyemak imbas menggunakan JavaScript:

1. Pelayar Silang @media (lebar) dan @media (tinggi) Nilai:

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

2. window.innerWidth dan window.innerHeight:

Sifat ini secara langsung mengembalikan lebar dan tinggi port pandangan CSS, termasuk bar skrol. Walau bagaimanapun, ambil perhatian bahawa nilai ini mungkin berbeza-beza pada peranti mudah alih disebabkan oleh isu penskalaan.

3. document.documentElement.clientWidth dan .clientHeight:

Sifat ini mengira lebar dan tinggi port pandangan tidak termasuk lebar bar skrol. Ia sejajar dengan nilai @media apabila tiada bar skrol hadir.

Maklumat Tambahan:

• Kaedah yang digariskan di atas adalah serasi merentas penyemak imbas dan disokong secara meluas.
• Sumber tersedia dalam talian untuk menguji output langsung pelbagai port pandangan dimensi.
• Perpustakaan pihak ketiga seperti "verge" dan "actual" menyediakan abstraksi yang mudah untuk mendapatkan dimensi viewport yang tepat dalam mana-mana unit ukuran yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Dimensi Port Pandangan Penyemak Imbas Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!