Dapatkan lebar perangkat dalam javascript

Apakah ada cara untuk mendapatkan lebar perangkat pengguna, sebagai lawan dari lebar area pandang, menggunakan javascript?

Kueri media CSS menawarkan ini, seperti yang bisa saya katakan

@media screen and (max-width:640px) {
    /* ... */
}

dan

@media screen and (max-device-width:960px) {
    /* ... */
}

Ini berguna jika saya menargetkan ponsel cerdas dalam orientasi lanskap. Misalnya, di iOS, deklarasi max-width:640pxakan menargetkan mode lanskap dan potret, bahkan pada iPhone 4. Sejauh yang saya tahu, ini tidak terjadi pada Android, jadi menggunakan lebar perangkat dalam hal ini berhasil menargetkan kedua orientasi, tanpa menargetkan perangkat desktop.

Namun , jika saya menjalankan pengikatan javascript berdasarkan lebar perangkat, saya tampaknya dibatasi untuk menguji lebar area pandang, yang berarti tes tambahan seperti berikut ini,

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

Ini tidak tampak elegan bagi saya, mengingat petunjuk bahwa lebar perangkat tersedia untuk css.

Anda bisa mendapatkan lebar layar perangkat melalui properti screen.width.
Terkadang berguna juga untuk menggunakan window.innerWidth (biasanya tidak ditemukan di perangkat seluler) daripada lebar layar saat berurusan dengan browser desktop di mana ukuran jendela sering kali lebih kecil dari ukuran layar perangkat.

Biasanya, ketika berurusan dengan perangkat seluler DAN browser desktop saya menggunakan yang berikut ini:

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

Satu masalah dengan jawaban berguna Bryan Rieger adalah bahwa pada layar dengan kepadatan tinggi, perangkat Apple melaporkan screen.width dalam penurunan, sementara perangkat Android melaporkannya dalam piksel fisik. (Lihat http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Saya sarankan menggunakan if (window.matchMedia('(max-device-width: 960px)').matches) {}pada browser yang mendukung matchMedia.

Saya baru saja mendapat ide ini, jadi mungkin itu picik, tetapi tampaknya berfungsi dengan baik dan mungkin paling konsisten antara CSS dan JS Anda.

Di CSS Anda, Anda menetapkan nilai lebar-maksimal untuk html berdasarkan nilai layar @media:

@media screen and (max-width: 480px) and (orientation: portrait){

    html { 
        max-width: 480px;
    }

    ... more styles for max-width 480px screens go here

}

Kemudian, dengan menggunakan JS (mungkin melalui kerangka kerja seperti JQuery), Anda hanya perlu memeriksa nilai lebar-maksimal dari tag html:

maxwidth = $('html').css('max-width');

Sekarang Anda dapat menggunakan nilai ini untuk membuat perubahan bersyarat:

If (maxwidth == '480px') { do something }

Jika menempatkan nilai lebar-maksimal pada tag html tampak menakutkan, maka mungkin Anda dapat menggunakan tag yang berbeda, yang hanya digunakan untuk tujuan ini. Untuk tujuan saya, tag html berfungsi dengan baik dan tidak memengaruhi markup saya.

Berguna jika Anda menggunakan Sass, dll : Untuk mengembalikan nilai yang lebih abstrak, seperti nama breakpoint, daripada nilai px Anda dapat melakukan sesuatu seperti:

1. Buat elemen yang akan menyimpan nama breakpoint, misalnya <div id="breakpoint-indicator" />
2. Menggunakan kueri media css mengubah properti konten untuk elemen ini, misalnya "besar" atau "seluler", dll. (Pendekatan kueri media dasar yang sama seperti di atas, tetapi menyetel properti 'konten' css alih-alih 'lebar-maks').
3. Dapatkan nilai properti konten css menggunakan js atau jquery (mis. Jquery $('#breakpoint-indicator').css('content');), yang mengembalikan "besar", atau "seluler", dll. Bergantung pada properti konten apa yang disetel oleh kueri media.
4. Bertindak berdasarkan nilai saat ini.

Sekarang Anda dapat bertindak pada nama breakpoint yang sama seperti yang Anda lakukan di sass, misalnya sass:, @include respond-to(xs)dan js if ($breakpoint = "xs) {}.

Yang paling saya sukai dari hal ini adalah saya dapat menentukan nama breakpoint saya semua di css dan di satu tempat (kemungkinan besar dokumen scss variabel) dan js saya dapat menindaklanjutinya secara independen.

var width = Math.max(window.screen.width, window.innerWidth);

Ini harus menangani sebagian besar skenario.

Kamu harus menggunakan

document.documentElement.clientWidth

Ini dianggap sebagai kompatibilitas lintas browser, dan merupakan metode yang sama dengan jQuery (window) .width (); penggunaan.

Untuk informasi rinci, lihat: https://ryanve.com/lab/dimensions/

Saya pikir menggunakan window.devicePixelRatiolebih elegan daripada window.matchMediasolusi:

if (window.innerWidth*window.devicePixelRatio <= 960 
    && window.innerHeight*window.devicePixelRatio <= 640) { 
    ... 
}

Periksa

const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
  // window width is at least 500px
} else {
  // window width is less than 500px
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

Anda dapat dengan mudah menggunakan

document.documentElement.clientWidth

Ponsel Lumia memberikan screen.width yang salah (setidaknya pada emulator). Jadi mungkin Math.min(window.innerWidth || Infinity, screen.width)akan berfungsi di semua perangkat?

Atau sesuatu yang lebih gila:

for (var i = 100; !window.matchMedia('(max-device-width: ' + i + 'px)').matches; i++) {}
var deviceWidth = i;

Ya mybe, Anda dapat menggunakan document.documentElement.clientWidth untuk mendapatkan lebar perangkat klien dan terus melacak lebar perangkat dengan memakai setInterval

seperti

setInterval(function(){
        width = document.documentElement.clientWidth;
        console.log(width);
    }, 1000);

Sama seperti FYI, ada pustaka yang disebut breakpoints yang mendeteksi lebar-maksimal sebagaimana diatur dalam CSS dan memungkinkan Anda untuk menggunakannya dalam kondisi JS if-else menggunakan tanda <=, <,>,> = dan ==. Saya merasa cukup berguna. Ukuran muatan di bawah 3 KB.