Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Mendapatkan Dimensi Port Pandangan Penyemak Imbas Menggunakan JavaScript?

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

DDD
Lepaskan: 2024-12-14 13:35:18
asal
969 orang telah melayarinya

How Can I Get Browser Viewport Dimensions Using 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);
Salin selepas log masuk

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
Sumber:

    [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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan