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

Mengesan Dimensi Viewport Penyemak Imbas

Isu:

Bagaimanakah saya boleh menentukan saiz viewport penyemak imbas menggunakan JavaScript? Maklumat ini amat berfaedah untuk mengoptimumkan kualiti imej berdasarkan kawasan paparan yang tersedia.

Penyelesaian:

Terdapat beberapa pendekatan untuk mendapatkan dimensi paparan pelayar:

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);

window.innerWidth dan window.innerHeight

Sifat:

• Mengambil semula dimensi paparan CSS termasuk bar skrol
• Mungkin tidak boleh dipercayai pada peranti mudah alih kerana skala awal dan zum

document.documentElement.clientWidth dan .clientHeight

Sifat:

• Lebar paparan CSS tolak lebar bar skrolPadankan dimensi @media dengan no bar skrol
• Sokongan silang penyemak imbas
• Tidak tepat tanpa doctype

[Output Langsung untuk Pelbagai Dimensi](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

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!