javascript - bloquear landscape html

Obtenga el ancho del dispositivo en javascript

Question

¿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 de 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:640px se max-width:640px tanto en modo paisaje como en modo retrato, incluso en un iPhone 4. Este no es el caso para Android, por lo que yo sé, así que usando el ancho del dispositivo en esta instancia se dirige con éxito a ambas orientaciones, sin dirigirse a dispositivos de escritorio.

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

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

Esto no me parece elegante, dada la sugerencia de que el ancho del dispositivo está disponible para CSS.

Answer 1

Acabo de tener esta idea, así que tal vez es 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 basado en el 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

}

Entonces, 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 hacer 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 poner una etiqueta diferente, una que solo se usa para este propósito. Para mi propósito, la etiqueta html funciona bien y no afecta mi marcado.

Útil si está usando 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 almacenará el nombre del punto de interrupción, por ejemplo, <div id="breakpoint-indicator" />
2. El uso de las consultas de medios css cambia la propiedad del contenido para este elemento, por ejemplo, "grande" o "móvil", etc. (el mismo enfoque básico de consulta de medios que el anterior, pero estableciendo la propiedad css ''content'' en lugar de ''max-width'').
3. Obtenga el valor de la propiedad de contenido css utilizando js o jquery (jquery por ejemplo $(''#breakpoint-indicator'').css(''content''); ), que devuelve "large", o "mobile", etc. dependiendo de la propiedad del contenido está configurado por la consulta de medios.
4. Actúa sobre el valor actual.

Ahora puede actuar con 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 mis nombres de punto de interrupción en CSS y en un solo lugar (probablemente un documento de variables scss) y mis js pueden actuar de forma independiente.

Answer 2

Creo que usar window.devicePixelRatio es más elegante que la solución window.matchMedia :

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

Answer 3

Los teléfonos Lumia dan un screen.width equivocado (al menos en el emulador). Entonces, ¿tal vez Math.min(window.innerWidth || Infinity, screen.width) 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;

Answer 4

Puede obtener el ancho de la 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 a menudo es menor que el tamaño de la pantalla del dispositivo.

Normalmente, cuando se trata de dispositivos móviles Y navegadores de escritorio, uso lo siguiente:

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

Answer 5

Un problema con la útil respuesta de Bryan Rieger es que en las pantallas de alta densidad, los dispositivos de Apple informan de ancho de pantalla en saltos, mientras que los dispositivos Android lo reportan en píxeles físicos. (Consulte 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.

Answer 6

puedes usarlo fácilmente

document.documentElement.clientWidth

Answer 7

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

Answer 8

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

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