Bagaimanakah JavaScript Boleh Menentukan Dimensi Port Pandangan Penyemak Imbas Dengan Tepat?

Mendapatkan Dimensi Port Pandangan Penyemak Imbas dengan JavaScript

Mengesan saiz port pandangan penyemak imbas pengguna adalah penting untuk menyampaikan pengalaman kandungan yang optimum. Memahami saiz port pandangan membolehkan tapak web memaparkan imej berkualiti tinggi dan menyesuaikan reka letak berdasarkan had peranti. JavaScript menyediakan pelbagai teknik untuk menentukan dimensi port pandang.

Nilai @media dan @media penyemak imbas silang

Untuk keserasian silang penyemak imbas, anda boleh menggunakan CSS @ peraturan media untuk mendapatkan dimensi viewport:

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

window.innerWidth dan window.innerHeight

Sifat ini mengembalikan lebar dan ketinggian port pandangan, termasuk bar skrol:

• Mendapatkan dimensi port pandangan CSS.
• Boleh memberikan nilai yang tidak tepat pada peranti mudah alih disebabkan penskalaan.
• Pelarasan zum mungkin memperkenalkan 1px offset.
• Tidak disokong oleh IE8 atau lebih awal.

document.documentElement.clientWidth dan .clientHeight

Sifat ini menyediakan lebar viewport dan ketinggian tolak bar skrol lebar:

• Padan dengan nilai @media apabila tiada bar skrol hadir.
• Setara dengan nilai lebar tetingkap jQuery.
• Pelayar silang yang tersedia.
• Mungkin tidak tepat jika pengisytiharan DOCTYPE adalah tiada.

Sumber Tambahan

• Output dimensi paparan langsung: [Pautan]
• Verge.js (port pandangan merentas penyemak imbas teknik): [Pautan]
• Actual.js (dimensi port pandang tepat dalam mana-mana unit): [Pautan]

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