Obter a largura do dispositivo em javascript

Existe uma maneira de obter a largura do dispositivo dos usuários, em oposição à largura da porta de visualização, usando javascript?

As consultas de mídia CSS oferecem isso, como posso dizer

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

e

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

Isso é útil se eu estiver segmentando smartphones na orientação paisagem. Por exemplo, no iOS, uma declaração de max-width:640pxsegmentará os modos paisagem e retrato, mesmo em um iPhone 4. Esse não é o caso do Android, pelo que sei, portanto, usar a largura do dispositivo nessa instância visa com êxito ambas as orientações, sem segmentar dispositivos de desktop.

No entanto , se estou chamando uma ligação javascript com base na largura do dispositivo, pareço estar limitado a testar a largura da janela de visualização, o que significa um teste extra, como a seguir,

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

Isso não me parece elegante, dada a dica de que a largura do dispositivo está disponível para css.

Você pode obter a largura da tela do dispositivo através da propriedade screen.width.
Às vezes, também é útil usar window.innerWidth (normalmente não encontrado em dispositivos móveis) em vez da largura da tela ao lidar com navegadores de desktop em que o tamanho da janela geralmente é menor que o tamanho da tela do dispositivo.

Normalmente, ao lidar com dispositivos móveis E navegadores de desktop, uso o seguinte:

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

Um problema com a resposta útil de Bryan Rieger é que, em telas de alta densidade, os dispositivos Apple relatam screen.width em mergulhos, enquanto os dispositivos Android relatam em pixels físicos. (Consulte http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Sugiro usar if (window.matchMedia('(max-device-width: 960px)').matches) {}em navegadores compatíveis com matchMedia.

Eu apenas tive essa idéia, talvez seja míope, mas parece funcionar bem e pode ser a mais consistente entre seu CSS e JS.

No seu CSS, você define o valor da largura máxima para html com base no valor da tela @media:

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

    html { 
        max-width: 480px;
    }

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

}

Então, usando JS (provavelmente por meio de uma estrutura como JQuery), basta verificar o valor da largura máxima da tag html:

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

Agora você pode usar esse valor para fazer alterações condicionais:

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

Se colocar o valor de largura máxima na tag html parecer assustador, talvez você possa colocar uma tag diferente, que seja usada apenas para esse fim. Para meu propósito, a tag html funciona bem e não afeta minha marcação.

Útil se você estiver usando Sass, etc : Para retornar um valor mais abstrato, como o nome do ponto de interrupção, em vez do valor de px, você pode fazer algo como:

1. Crie um elemento que armazene o nome do ponto de interrupção, por exemplo <div id="breakpoint-indicator" />
2. O uso de consultas de mídia css altera a propriedade de conteúdo desse elemento, por exemplo, "grande" ou "móvel", etc. (a mesma abordagem básica de consulta de mídia acima, mas definindo a propriedade 'conteúdo' do css em vez de 'largura máxima').
3. Obtenha o valor da propriedade de conteúdo css usando js ou jquery (jquery, por exemplo $('#breakpoint-indicator').css('content');), que retorna "grande" ou "móvel" etc., dependendo de como a propriedade de conteúdo é definida pela consulta de mídia.
4. Atue no valor atual.

Agora você pode agir com os mesmos nomes de ponto de interrupção que você faz no sass, por exemplo, sass: @include respond-to(xs)e js if ($breakpoint = "xs) {}.

O que mais gosto sobre isso é que posso definir todos os nomes dos pontos de interrupção em css e em um único local (provavelmente um documento scss de variáveis) e meus js podem atuar neles independentemente.

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

Isso deve lidar com a maioria dos cenários.

Você deveria usar

document.documentElement.clientWidth

É considerado compabilidade entre navegadores e é o mesmo método que jQuery (window) .width (); usos.

Para informações detalhadas, consulte: https://ryanve.com/lab/dimensions/

Eu acho que usar window.devicePixelRatioé mais elegante que a window.matchMediasolução:

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

verifique-o

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

você pode facilmente usar

document.documentElement.clientWidth

Os telefones Lumia oferecem largura de tela incorreta (pelo menos no emulador). Então, talvez Math.min(window.innerWidth || Infinity, screen.width)funcione em todos os dispositivos?

Ou algo mais louco:

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

Sim, você pode usar document.documentElement.clientWidth para obter a largura do dispositivo do cliente e acompanhar a largura do dispositivo, colocando setInterval

Assim como

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

Assim como um FYI, existe uma biblioteca chamada pontos de interrupção, que detecta a largura máxima conforme definida em CSS e permite que você a use em condições JS se-else usando sinais <=, <,>,> = e ==. Achei bastante útil. O tamanho da carga útil é inferior a 3 KB.