Bagaimanakah Saya Boleh Mendapatkan Lebar Skrin Peranti Dengan Tepat Menggunakan JavaScript?

Dapatkan Pengukuran Lebar Peranti yang Tepat dengan JavaScript

Apabila menyesuaikan aplikasi web kepada saiz peranti yang berbeza, mendapatkan lebar skrin sebenar peranti adalah penting. Walaupun CSS menawarkan pertanyaan media dengan sifat max-device-width, JavaScript tidak mempunyai persamaan langsung untuk mendapatkan maklumat ini.

Limitan Lebar Pandangan

Pengikatan JavaScript sering bergantung pada menguji lebar port pandangan, yang boleh mengakibatkan keputusan yang tidak tepat untuk peranti dalam orientasi landskap, kerana ia memaparkan lebih luas tersedia kawasan. Pengehadan ini memerlukan semakan tambahan, menjejaskan keanggunan kod.

Penyelesaian: Sifat Lebar Skrin

Untuk menentukan lebar skrin peranti dengan tepat, JavaScript menyediakan sifat screen.width. Nilai ini mewakili ruang skrin yang boleh dilihat, tidak termasuk bar skrol dan elemen penyemak imbas lain.

Pertimbangan Merentas Platform

Dalam sesetengah kes, window.innerWidth mungkin lebih sesuai, terutamanya untuk pelayar desktop di mana saiz tetingkap berbeza daripada saiz skrin peranti. Untuk memenuhi semua platform, adalah disyorkan untuk menggunakan bersyarat berikut:

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Pendekatan ini memperuntukkan lebar peranti sebenar kepada pembolehubah lebar jika window.innerWidth ditakrifkan, jika tidak, ia menggunakan screen.width sebagai sandaran.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapatkan Lebar Skrin Peranti Dengan Tepat Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!