Obtenga el ancho del dispositivo en javascript

¿Hay alguna manera de obtener el ancho del dispositivo de los usuarios, en lugar del ancho de la ventana gráfica, usando JavaScript?

Las consultas de medios CSS ofrecen esto, como puedo decir

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

y

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

Esto es útil si estoy apuntando a teléfonos inteligentes en orientación horizontal. Por ejemplo, en iOS, una declaración de max-width:640pxapuntará a los modos horizontal y vertical, incluso en un iPhone 4. Este no es el caso para Android, por lo que puedo decir, por lo que el uso del ancho del dispositivo en este caso apunta con éxito a ambas orientaciones, sin apuntar a dispositivos de escritorio.

Sin embargo , si invoco un enlace de JavaScript basado en el ancho del dispositivo, parece que estoy limitado a probar el ancho de la ventana gráfica, lo que significa una prueba adicional como en el siguiente,

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

Esto no me parece elegante, dado el indicio de que el ancho del dispositivo está disponible para css.

Puede obtener el ancho de pantalla del dispositivo a través de la propiedad screen.width.
A veces también es útil usar window.innerWidth (no se encuentra típicamente en dispositivos móviles) en lugar del ancho de la pantalla cuando se trata de navegadores de escritorio donde el tamaño de la ventana es a menudo menor que el tamaño de la pantalla del dispositivo.

Normalmente, cuando se trata de dispositivos móviles y navegadores de escritorio utilizo lo siguiente:

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

Un problema con la útil respuesta de Bryan Rieger es que en las pantallas de alta densidad, los dispositivos Apple informan el ancho de la pantalla en dips, mientras que los dispositivos Android lo informan en píxeles físicos. (Ver http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) Sugiero usar if (window.matchMedia('(max-device-width: 960px)').matches) {}en navegadores compatibles con matchMedia.

Acabo de tener esta idea, así que tal vez sea miope, pero parece funcionar bien y podría ser la más consistente entre su CSS y JS.

En su CSS, establece el valor de ancho máximo para html en función del valor de pantalla @media:

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

    html { 
        max-width: 480px;
    }

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

}

Luego, usando JS (probablemente a través de un marco como JQuery), simplemente verificaría el valor de ancho máximo de la etiqueta html:

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

Ahora puede usar este valor para realizar cambios condicionales:

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

Si poner el valor de ancho máximo en la etiqueta html parece aterrador, entonces tal vez pueda colocar una etiqueta diferente, una que solo se use para este propósito. Para mi propósito, la etiqueta html funciona bien y no afecta mi marcado.

Útil si está utilizando Sass, etc .: para devolver un valor más abstracto, como el nombre del punto de interrupción, en lugar del valor de px, puede hacer algo como:

1. Cree un elemento que almacene el nombre del punto de interrupción, p. Ej. <div id="breakpoint-indicator" />
2. El uso de consultas de medios css cambia la propiedad de contenido para este elemento, por ejemplo, "grande" o "móvil", etc. (el mismo enfoque de consulta de medios básico que el anterior, pero configurando la propiedad 'contenido' de css en lugar de 'ancho máximo').
3. Obtenga el valor de la propiedad de contenido CSS utilizando js o jquery (por ejemplo $('#breakpoint-indicator').css('content');, jquery ), que devuelve "grande" o "móvil", etc., dependiendo de la propiedad de contenido establecida por la consulta de medios.
4. Actuar sobre el valor actual.

Ahora puede actuar sobre los mismos nombres de punto de interrupción que en sass, por ejemplo, sass: @include respond-to(xs)y js if ($breakpoint = "xs) {}.

Lo que más me gusta de esto es que puedo definir todos mis nombres de punto de interrupción en css y en un solo lugar (probablemente un documento scss de variables) y mi js puede actuar sobre ellos de forma independiente.

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

Esto debería manejar la mayoría de los escenarios.

Deberías usar

document.documentElement.clientWidth

Se considera como compatibilidad entre navegadores, y es el mismo método que jQuery (window) .width (); usos.

Para obtener información detallada, consulte: https://ryanve.com/lab/dimensions/

Creo que usar window.devicePixelRatioes más elegante que la window.matchMediasolución:

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

revisalo

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

puedes usar fácilmente

document.documentElement.clientWidth

Los teléfonos Lumia dan un ancho de pantalla incorrecto (al menos en el emulador). Entonces, ¿tal Math.min(window.innerWidth || Infinity, screen.width)vez funcionará en todos los dispositivos?

O algo más loco:

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

Ya puede usar document.documentElement.clientWidth para obtener el ancho del dispositivo del cliente y seguir el ancho del dispositivo mediante setInterval

al igual que

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

Al igual que para su información, hay una biblioteca llamada puntos de interrupción que detecta el ancho máximo establecido en CSS y le permite usarlo en condiciones JS if-else usando signos <=, <,>,> = y ==. Lo encontré bastante útil. El tamaño de la carga útil es inferior a 3 KB.