Rumah >hujung hadapan web >tutorial js >Bagaimanakah Saya Mengesan Resolusi Skrin Peranti Pengguna Menggunakan JavaScript?

Bagaimanakah Saya Mengesan Resolusi Skrin Peranti Pengguna Menggunakan JavaScript?

DDD
DDDasal
2024-10-26 02:55:02783semak imbas

How Do I Detect the Screen Resolution of a User's Device Using JavaScript?

Mengesan Resolusi Skrin dalam JavaScript

Dalam pembangunan web, selalunya perlu untuk menentukan resolusi peranti pengguna. JavaScript menyediakan cara mudah untuk mendapatkan maklumat ini untuk kebanyakan penyemak imbas moden.

Keserasian Pelayar

Objek window.screen disokong dalam semua penyemak imbas utama, termasuk:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera

Mengakses Skrin Resolusi

Untuk mendapatkan resolusi skrin, gunakan sifat berikut bagi objek window.screen:

  • availHeight: Ketinggian skrin yang tersedia dalam piksel, tidak termasuk bar alat, menu, dsb.
  • availWidth: Lebar skrin yang tersedia dalam piksel, tidak termasuk bar alat, menu, dll.
  • ketinggian: Ketinggian mutlak skrin dalam piksel, termasuk bar alat, menu, dll.
  • lebar: Lebar mutlak skrin dalam piksel, termasuk bar alat, menu, dll.

Resolusi Asli untuk Peranti Mudah Alih

Untuk menentukan resolusi asli peranti mudah alih, darabkan lebar dan tinggi yang tersedia dengan nisbah piksel peranti:

<code class="javascript">nativeWidth = window.screen.availWidth * window.devicePixelRatio;
nativeHeight = window.screen.availHeight * window.devicePixelRatio;</code>

Mendapatkan Resolusi Mutlak

Jika anda memerlukan resolusi mutlak skrin (termasuk bar alat dan menu), gunakan sifat ketinggian dan lebar bukannya availHeight dan availWidth.

Contoh

Kod berikut mendapatkan semula peleraian skrin tersedia:

<code class="javascript">let availHeight = window.screen.availHeight;
let availWidth = window.screen.availWidth;
console.log("Available screen resolution: " + availWidth + "x" + availHeight);</code>

Atas ialah kandungan terperinci Bagaimanakah Saya Mengesan Resolusi Skrin Peranti Pengguna Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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