saber - validar tamaño de pantalla javascript

¿Cómo detectar la resolución de la pantalla con JavaScript?

Question

¿Hay alguna manera que funcione para todos los navegadores?

Answer 1

¿Quiere decir resolución de pantalla (por ejemplo, 72 puntos por pulgada) o dimensiones de píxel (la ventana del navegador es actualmente de 1000 x 800 píxeles)?

La resolución de pantalla le permite saber qué tan gruesa será una línea de 10 píxeles en pulgadas. Las dimensiones de píxel le indican qué porcentaje de la altura de pantalla disponible ocupará una línea horizontal de 10 píxeles de ancho.

No hay forma de conocer la resolución de la pantalla solo desde Javascript, ya que la computadora en sí no suele conocer las dimensiones reales de la pantalla, solo el número de píxeles. 72 dpi es la suposición usual ...

Tenga en cuenta que hay mucha confusión sobre la resolución de la pantalla, a menudo las personas usan el término en lugar de la resolución de píxeles, pero las dos son bastante diferentes. Ver Wikipedia

Por supuesto, también puedes medir la resolución en puntos por cm. También está el oscuro tema de los puntos no cuadrados. Pero yo divago.

Answer 2

Consulte Obtener resolución de pantalla del monitor con Javascript y el objeto window.screen

Answer 3

En JavaScript vainilla, esto le dará el ancho / alto DISPONIBLE :

window.screen.availHeight
window.screen.availWidth

Para el ancho / alto absoluto, use:

window.screen.height
window.screen.width

Ambos de los anteriores se pueden escribir sin el prefijo de ventana.

Como jQuery? Esto funciona en todos los navegadores, pero cada navegador da valores diferentes.

$(window).width()
$(window).height()

Answer 4

Intentar obtener esto en un dispositivo móvil requiere unos pocos pasos más. screen.availWidth mantiene igual independientemente de la orientación del dispositivo.

Aquí está mi solución para dispositivos móviles:

function getOrientation(){
    return Math.abs(window.orientation) - 90 == 0 ? "landscape" : "portrait";
};
function getMobileWidth(){
    return getOrientation() == "landscape" ? screen.availHeight : screen.availWidth;
};
function getMobileHeight(){
    return getOrientation() == "landscape" ? screen.availWidth : screen.availHeight;
};

Answer 5

Si desea detectar la resolución de pantalla, es posible que desee comprobar el complemento de res . Te permite hacer lo siguiente:

var res = require(''res'')
res.dppx() // 1
res.dpi() // 96
res.dpcm() // 37.79527559055118

Aquí hay algunos consejos de gran resolución de Ryan Van Etten, el autor del complemento:

• Existen 2 conjuntos de unidades y se diferencian en una escala fija: unidades de dispositivo y unidades de CSS.
• La resolución se calcula como el número de puntos que pueden caber a lo largo de una longitud CSS determinada.
• Conversión de la unidad: 1⁢in = 2.54⁢cm = 96⁢px = 72⁢pt
• CSS tiene longitudes relativas y absolutas. En zoom normal: 1⁢em = 16⁢px
• dppx es equivalente a la relación dispositivo-píxel.
• La definición de devicePixelRatio difiere según la plataforma.
• Las consultas de medios pueden enfocarse en resolución mínima. Use con cuidado para la velocidad.

Aquí está el código fuente para res, a partir de hoy:

!function(root, name, make) {
  if (typeof module != ''undefined'' && module.exports) module.exports = make()
  else root[name] = make()
}(this, ''res'', function() {

  var one = {dpi: 96, dpcm: 96 / 2.54}

  function ie() {
    return Math.sqrt(screen.deviceXDPI * screen.deviceYDPI) / one.dpi
  }

  function dppx() {
    // devicePixelRatio: Webkit (Chrome/Android/Safari), Opera (Presto 2.8+), FF 18+
    return typeof window == ''undefined'' ? 0 : +window.devicePixelRatio || ie() || 0
  }

  function dpcm() {
    return dppx() * one.dpcm
  }

  function dpi() {
    return dppx() * one.dpi
  }

  return {''dppx'': dppx, ''dpi'': dpi, ''dpcm'': dpcm}
});

Answer 6

También puede obtener el ancho y alto de la VENTANA, evitando las barras de herramientas del navegador y ... (no solo el tamaño de la pantalla).

Para hacerlo, use las propiedades window.innerWidth y window.innerHeight . Véalo en w3schools .

En la mayoría de los casos, será la mejor manera, por ejemplo, de mostrar un diálogo modal flotante perfectamente centrado. Le permite calcular posiciones en la ventana, sin importar qué orientación de resolución o tamaño de ventana use el navegador.

Answer 7

Usando jQuery puedes hacer:

$(window).width()
$(window).height()

Answer 8

solo para futuras referencias:

function getscreenresolution()
{
    window.alert("Your screen resolution is: " + screen.height + ''x'' + screen.width);
}

Answer 9

respuesta original

Sí.

window.screen.availHeight
window.screen.availWidth

actualización 2017-11-10

De Tsunamis en los comentarios:

Para obtener la resolución nativa de, por ejemplo, un dispositivo móvil, debe multiplicar con la proporción de píxel del dispositivo: window.screen.width * window.devicePixelRatio y window.screen.height * window.devicePixelRatio . Esto también funcionará en los escritorios, que tendrán una proporción de 1.

Y de Ben en otra respuesta:

En JavaScript vainilla, esto le dará el ancho / alto DISPONIBLE:

window.screen.availHeight
window.screen.availWidth

Para el ancho / alto absoluto, use:

window.screen.height
window.screen.width

Answer 10

function getScreenWidth()
{
   var de = document.body.parentNode;
   var db = document.body;
   if(window.opera)return db.clientWidth;
   if (document.compatMode==''CSS1Compat'') return de.clientWidth;
   else return db.clientWidth;
}

Answer 11

var width = screen.width;
var height = screen.height;