Bagaimanakah Saya Boleh Mendapatkan Lebar Peranti Sebenar dalam JavaScript?

Menentukan Lebar Peranti dalam JavaScript

Pengenalan

Merakam lebar sebenar peranti, berbanding kepada lebar port pandangan, adalah keperluan biasa dalam pembangunan JavaScript. Pertanyaan media CSS menyediakan keupayaan ini melalui sifat lebar peranti maks. Walau bagaimanapun, merapatkan fungsi ini kepada JavaScript tetap menjadi cabaran.

Lebar Peranti lwn. Lebar Port Pandangan

Lebar Port Pandangan berkaitan dengan bahagian halaman yang boleh dilihat dalam tetingkap penyemak imbas. Lebar peranti, sebaliknya, mewakili keseluruhan saiz skrin fizikal peranti. Perbezaan ini menjadi penting apabila mencipta reka bentuk responsif, terutamanya apabila memenuhi keperluan telefon pintar dalam orientasi landskap.

Penyelesaian JavaScript

Untuk mendapatkan lebar peranti dalam JavaScript, gunakan skrin. sifat lebar:

var deviceWidth = screen.width;

Dalam sesetengah kes, terutamanya dengan penyemak imbas desktop, window.innerWidth mungkin memberikan ukuran yang lebih tepat:

var windowWidth = window.innerWidth;

Untuk senario yang melibatkan kedua-dua penyemak imbas desktop dan peranti mudah alih, penyelesaian yang komprehensif ialah menggabungkan kedua-dua ukuran:

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

Pendekatan ini memastikan lebar peranti yang betul tanpa mengira peranti atau jenis penyemak imbas.

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