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

¿Hay alguna manera que funcione para todos los navegadores?

respuesta original

Si.

window.screen.availHeight
window.screen.availWidth

actualizar 2017-11-10

De Tsunamis en los comentarios:

Para obtener la resolución nativa de, es decir, un dispositivo móvil, debe multiplicar con la relación de píxeles del dispositivo: window.screen.width * window.devicePixelRatioy window.screen.height * window.devicePixelRatio. Esto también funcionará en equipos de escritorio, 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

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

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 la ventana.

¿Te gusta jQuery? Esto funciona en todos los navegadores, pero cada navegador proporciona valores diferentes.

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

¿Te refieres a la resolución de pantalla (por ejemplo, 72 puntos por pulgada) o dimensiones de píxeles (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 en píxeles 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 pantalla solo desde Javascript, ya que la computadora en sí misma generalmente no conoce las dimensiones reales de la pantalla, solo la cantidad de píxeles. 72 ppp es la suposición habitual ...

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

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

Usando jQuery puedes hacer:

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

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

Para hacer esto, use: window.innerWidth y window.innerHeightpropiedades. 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 esté usando el navegador.

Intentar conseguir esto en un dispositivo móvil requiere algunos pasos más. screen.availWidthpermanece 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;
};

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

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;
}

solo para referencia futura:

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

Si desea detectar la resolución de la pantalla, es posible que desee verificar la resolución del complemento . Le permite hacer lo siguiente:

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

Aquí hay algunas conclusiones excelentes de Ryan Van Etten, el autor del complemento:

• Existen 2 conjuntos de unidades y difieren en una escala fija: unidades de dispositivo y unidades CSS.
• La resolución se calcula como el número de puntos que pueden caber a lo largo de una longitud CSS particular.
• Conversión de unidades: 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 apuntar a una resolución mínima. Úselo con cuidado para la velocidad.

Aquí está el código fuente de 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}
});