Bagaimanakah Saya Boleh Menentukan Lebar Skrin Peranti dengan Tepat dalam JavaScript?

Menentukan Lebar Skrin Peranti dalam JavaScript

Keupayaan untuk mendapatkan semula lebar skrin peranti dalam JavaScript boleh menjadi berharga untuk menyesuaikan kandungan dengan dimensi khusus peranti pengguna. Walaupun pertanyaan media CSS menyediakan cara yang mudah untuk membuat pelarasan penggayaan bergantung pada saiz skrin, JavaScript menawarkan kaedah langsung untuk mengakses lebar sebenar peranti.

Tidak seperti lebar port pandangan, lebar peranti menyediakan ukuran yang tidak dicemari bagi dimensi fizikal skrin . Ini amat berguna untuk menyasarkan orientasi peranti tertentu yang mungkin tidak sejajar dengan kekangan viewport. Sebagai contoh, pada peranti iOS, pertanyaan media CSS yang menyasarkan lebar maksimum 640px akan menangkap kedua-dua mod landskap dan potret walaupun pada iPhone 4. Walau bagaimanapun, peranti Android memerlukan penggunaan lebar peranti untuk mengendalikan kedua-dua orientasi dengan berkesan sambil mengecualikan peranti desktop.

Walau bagaimanapun, apabila cuba menggunakan pengikatan JavaScript berdasarkan lebar peranti, adalah perkara biasa untuk dihadkan kepada lebar port pandang. Pengehadan ini memaksa semakan bersyarat tambahan, seperti yang ditunjukkan oleh kod berikut:

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

Untuk memintas pendekatan bertele-tele ini, pertimbangkan untuk menggunakan sifat screen.width, yang menyediakan akses terus kepada lebar skrin fizikal peranti. Selain itu, untuk penyemak imbas desktop yang saiz tetingkap mungkin berbeza daripada saiz skrin, sifat window.innerWidth boleh digunakan.

Dalam situasi yang melibatkan kedua-dua penyemak imbas mudah alih dan desktop, pendekatan hibrid selalunya disyorkan:

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

Gabungan ini memastikan pengesanan lebar peranti yang tepat merentas pelbagai peranti dan sistem pengendalian.

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