Bagaimanakah Saya Boleh Menentukan Lebar Peranti dengan Tepat dalam JavaScript?

Menentukan Lebar Peranti dalam JavaScript

Pengenalan:
Mengakses lebar peranti adalah penting untuk reka bentuk web responsif, terutamanya apabila menyasarkan skrin tertentu saiz. Walaupun pertanyaan media CSS menyediakan sifat lebar peranti maks untuk memenuhi keperluan ini, JavaScript tidak mempunyai kaedah langsung yang serupa untuk mendapatkan semula lebar intrinsik peranti.

Lebar Peranti lwn. Lebar Port Pandangan:
Cabarannya terletak pada perbezaan antara lebar peranti dan lebar port pandangan. Yang pertama merujuk kepada saiz skrin fizikal, manakala yang kedua mewakili bahagian yang boleh dilihat dalam tetingkap penyemak imbas, yang mungkin berbeza disebabkan oleh saiz semula atau zum.

Penghadan Lebar Port Pandangan:
Pergantungan pada lebar port pandangan dalam JavaScript boleh membawa kepada ketidakcekapan. Pertimbangkan contoh yang diberikan dalam pertanyaan, dengan syarat tambahan diperlukan untuk membezakan antara orientasi landskap dan potret pada telefon pintar iOS. Di sinilah keupayaan untuk mengakses secara langsung lebar peranti menjadi berharga.

Penyelesaian: Screen.width Property
Penyelesaian terletak pada screen.width property, yang menyediakan akses kepada lebar skrin fizikal peranti. Sifat ini disokong secara meluas merentas penyemak imbas dan peranti yang berbeza.

Pertimbangan Keserasian:
Walau bagaimanapun, perlu diperhatikan bahawa pada sesetengah penyemak imbas desktop, sifat screen.width mungkin tidak selalu mencerminkan saiz skrin sebenar peranti. Untuk menangani perkara ini, pendekatan hibrid digunakan, seperti yang ditunjukkan dalam coretan berikut:

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

Coretan ini menggunakan window.innerWidth jika tersedia, yang biasanya berlaku untuk peranti mudah alih dan kembali ke skrin. lebar jika ia tidak disokong. Ini memastikan keserasian merentas pelbagai peranti dan penyemak imbas.

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