Ottieni la larghezza del dispositivo in javascript

C'è un modo per ottenere la larghezza del dispositivo dell'utente, invece della larghezza del viewport, usando javascript?

Le query multimediali CSS offrono questo, come posso dire

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

e

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

Questo è utile se sto mirando agli smartphone con orientamento orizzontale. Ad esempio, su iOS una dichiarazione max-width:640pxriguarderà sia la modalità orizzontale che quella verticale, anche su un iPhone 4. Questo non è il caso di Android, per quanto ne so, quindi l'utilizzo della larghezza del dispositivo in questo caso mira con successo a entrambi gli orientamenti, senza prendere di mira i dispositivi desktop.

Tuttavia , se sto invocando un binding javascript basato sulla larghezza del dispositivo, mi sembra di essere limitato a testare la larghezza del viewport, il che significa un test extra come di seguito,

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

Questo non mi sembra elegante, dato il suggerimento che la larghezza del dispositivo è disponibile per css.

È possibile ottenere la larghezza dello schermo del dispositivo tramite la proprietà screen.width.
A volte è anche utile usare window.innerWidth (che di solito non si trova sui dispositivi mobili) invece della larghezza dello schermo quando si ha a che fare con browser desktop in cui la dimensione della finestra è spesso inferiore alla dimensione dello schermo del dispositivo.

In genere, quando si tratta di dispositivi mobili E browser desktop, utilizzo quanto segue:

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

Un problema con l'utile risposta di Bryan Rieger è che sui display ad alta densità, i dispositivi Apple riportano screen.width in cali, mentre i dispositivi Android lo segnalano in pixel fisici. (Vedi http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Suggerisco di utilizzare if (window.matchMedia('(max-device-width: 960px)').matches) {}su browser che supportano matchMedia.

Ho appena avuto questa idea, quindi forse è miope, ma sembra funzionare bene e potrebbe essere la più coerente tra il tuo CSS e JS.

Nel tuo CSS imposti il ​​valore di larghezza massima per html in base al valore dello schermo @media:

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

    html { 
        max-width: 480px;
    }

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

}

Quindi, usando JS (probabilmente tramite un framework come JQuery), dovresti semplicemente controllare il valore di larghezza massima del tag html:

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

Ora puoi utilizzare questo valore per apportare modifiche condizionali:

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

Se mettere il valore di larghezza massima sul tag html sembra spaventoso, allora forse puoi inserire un tag diverso, uno che viene utilizzato solo per questo scopo. Per il mio scopo il tag html funziona bene e non influisce sul markup.

Utile se stai usando Sass, ecc : per restituire un valore più astratto, come il nome del punto di interruzione, invece del valore px puoi fare qualcosa come:

1. Creare un elemento che memorizzerà il nome del punto di interruzione, ad es <div id="breakpoint-indicator" />
2. L'utilizzo di query multimediali CSS modifica la proprietà del contenuto per questo elemento, ad esempio "large" o "mobile", ecc. (Stesso approccio di query multimediale di base come sopra, ma impostando la proprietà 'content' css invece di 'max-width').
3. Ottieni il valore della proprietà del contenuto CSS utilizzando js o jquery (ad es. Jquery $('#breakpoint-indicator').css('content');), che restituisce "large" o "mobile", ecc. A seconda di ciò su cui è impostata la proprietà del contenuto dalla query multimediale.
4. Agire sul valore corrente.

Ora puoi agire sugli stessi nomi dei punti di interruzione di sass, ad esempio sass: @include respond-to(xs)e js if ($breakpoint = "xs) {}.

Quello che mi piace particolarmente di questo è che posso definire i miei nomi di breakpoint tutti in CSS e in un unico posto (probabilmente un documento scss di variabili) e il mio js può agire su di essi in modo indipendente.

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

Questo dovrebbe gestire la maggior parte degli scenari.

Dovresti usare

document.documentElement.clientWidth

È considerato compatibile con tutti i browser ed è lo stesso metodo utilizzato da jQuery (window) .width (); usi.

Per informazioni dettagliate dai un'occhiata a: https://ryanve.com/lab/dimensions/

Penso che l'uso window.devicePixelRatiosia più elegante della window.matchMediasoluzione:

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

controllalo

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

puoi facilmente usare

document.documentElement.clientWidth

I telefoni Lumia danno screen.width errato (almeno sull'emulatore). Quindi forse Math.min(window.innerWidth || Infinity, screen.width)funzionerà su tutti i dispositivi?

O qualcosa di più folle:

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

Sì, puoi usare document.documentElement.clientWidth per ottenere la larghezza del dispositivo del client e continuare a tracciare la larghezza del dispositivo impostando setInterval

proprio come

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

Proprio come per tua informazione, c'è una libreria chiamata breakpoints che rileva la larghezza massima impostata nei CSS e ti consente di usarla in condizioni JS if-else usando i segni <=, <,>,> = e ==. L'ho trovato abbastanza utile. La dimensione del payload è inferiore a 3 KB.