Cómo obtener la resolución de pantalla con JavaScript: screen.width, innerWidth y más

Detectar la resolución de pantalla en JavaScript es una de esas tareas que parecen simples… hasta que te das cuenta de que existen tres tipos de tamaños distintos: la pantalla real del dispositivo, la ventana del navegador y el famoso viewport. Cuando empecé a trabajar con overlays y layouts dinámicos, descubrí que usar la propiedad incorrecta podía romper toda la interfaz. Así que en esta guía voy a contarte paso a paso lo que a mí me habría gustado leer desde el principio.

JavaScript ofrece varias herramientas para calcular el ancho y alto de la pantalla —es decir, la resolución del dispositivo—. La mayor parte de este procesamiento se realiza a través del objeto screen y del objeto window, cada uno con sus propias propiedades y casos de uso.

Las razones para querer obtener la resolución de la pantalla son variadas: controlar la disposición de los contenidos, mostrar información al usuario, construir un overlay a pantalla completa, o simplemente aplicar lógica de diseño responsivo directamente desde JavaScript. En esta entrada veremos cómo hacerlo con JavaScript nativo y, de propina, también con jQuery.

Qué significa "resolución" en JavaScript: pantalla, navegador y viewport

Antes de escribir una sola línea de código, necesitas tener claro qué estás midiendo exactamente, porque JavaScript no da una única respuesta. Y sí, a mí también me pasó aquello de mezclar tamaños y preguntarme por qué mis cálculos no cuadraban.

En JavaScript existen tres "niveles" de tamaño que conviene distinguir:

• Pantalla real (screen): el tamaño total en píxeles del dispositivo físico, independientemente de lo que tenga abierto el usuario.
• Ventana del navegador (window): el espacio que ocupa la ventana del navegador, incluyendo sus marcos y barras internas.
• Viewport (innerWidth / innerHeight): la zona visible donde se renderiza tu web, sin contar barras de herramientas ni marcos del navegador.

Si sabes distinguirlos, evitarás el 90 % de los errores al trabajar con resoluciones en JavaScript.

Tabla comparativa: screen, window y viewport

Cómo obtener el ancho y alto de una pantalla con JavaScript (screen.width y screen.height)

Como podemos ver en la siguiente figura, el objeto screen está compuesto de varios métodos y atributos. Sin embargo, para obtener la resolución de pantalla los que más nos interesan son screen.width y screen.height.

Con las siguientes dos líneas de código obtienes la resolución completa del dispositivo:

screen.width;
screen.height;

De esta forma puedes obtener la resolución en píxeles de la pantalla —compuesta por screen.width (ancho) y screen.height (alto)— de dispositivos como monitores, teléfonos, tablets, entre muchos otros. Es importante aclarar que estos valores son fijos: representan el tamaño físico del dispositivo y no cambian al redimensionar la ventana del navegador.

Espacio disponible: screen.availWidth y screen.availHeight

Además de obtener la resolución total, el objeto screen nos proporciona dos propiedades adicionales muy útiles: screen.availWidth y screen.availHeight. Estas excluyen el espacio que ocupa el sistema operativo (como la barra de tareas de Windows o el Dock de macOS), devolviendo el espacio real disponible para mostrar el navegador web.

screen.availWidth;
screen.availHeight;

Son útiles cuando necesitas saber exactamente cuánto espacio tiene disponible el usuario en su escritorio, no solo el tamaño bruto de su pantalla.

Ejemplo completo: obtener la resolución de pantalla con JavaScript

document.getElementById("widthYheight").innerHTML =
    "Mi resolución de pantalla es: " + screen.width + " px por " + screen.height + " px";

document.getElementById("availwidthYavailheight").innerHTML =
    "El ancho y alto disponible para el navegador es: " + screen.availWidth + " px por " + screen.availHeight + " px";

Cómo detectar el cambio de tamaño de la ventana con JavaScript (onresize)

Ya teniendo claro cómo obtener la resolución de la pantalla física mediante el objeto screen, otro escenario muy común es saber cuándo el usuario redimensiona la ventana del navegador y cuál es su tamaño en ese momento. Para eso, la API de JavaScript expone el evento onresize:

<body onresize="funcionResize()">

Este evento se dispara cada vez que se redimensiona la ventana del navegador. Para saber cuánto espacio en píxeles está ocupando la ventana en ese momento, utilizamos las propiedades outerWidth y outerHeight del objeto window:

function funcionResize() {
    var widthBrowser = window.outerWidth;
    var heightBrowser = window.outerHeight;
    console.log("Tamaño de la ventana del navegador: width=" + widthBrowser + ", height=" + heightBrowser);
}

Alternativamente, también puedes escuchar el evento con addEventListener, que es la forma más moderna y recomendada en JavaScript actual:

window.addEventListener("resize", function () {
    console.log("Ancho:", window.outerWidth, "Alto:", window.outerHeight);
});

Cómo conocer el espacio disponible del navegador (screen.availWidth y screen.availHeight)

Estas propiedades son muy útiles si necesitas saber el espacio de pantalla no ocupado por elementos del sistema operativo. Muchos desarrolladores no las usan, pero pueden marcar una diferencia notable en interfaces de escritorio o aplicaciones web que buscan un comportamiento nativo.

console.log(screen.availWidth, screen.availHeight);

Con esto obtienes el espacio "usable" para mostrar un navegador, sin contar la barra de tareas, docks, paneles laterales del sistema, etc.

Tamaño real del viewport: innerWidth, innerHeight y outerWidth

Aquí empieza lo realmente útil para el desarrollo web moderno. El viewport es el área donde vive y se renderiza el contenido de tu página. A diferencia de outerWidth, que incluye los marcos del navegador, innerWidth e innerHeight devuelven exclusivamente el área visible disponible para tu web.

• window.innerWidth / window.innerHeight: dimensiones reales del área visible (viewport). Cambian al redimensionar la ventana.
• window.outerWidth / window.outerHeight: toda la ventana del navegador, incluyendo marcos y barras de herramientas.

console.log("Viewport ancho:", window.innerWidth);
console.log("Viewport alto:", window.innerHeight);

Estas son las propiedades que se usan en el 90 % de los casos prácticos. Si estás diseñando algo adaptable o calculando posiciones para overlays y modales, innerWidth e innerHeight son tu punto de partida.

Cómo detectar el cambio de tamaño de pantalla con jQuery

jQuery sigue siendo una librería muy presente en proyectos legados y en muchos CMS. Si el sitio que estás desarrollando ya la emplea, detectar el cambio de tamaño de la ventana es igual de sencillo gracias al método $(window).resize():

$(window).resize(function () {
    var widthBrowser = $(window).width();
    var heightBrowser = $(window).height();
    console.log("Tamaño del navegador: width=" + widthBrowser + " height=" + heightBrowser);
});

Ten en cuenta que $(window).width() de jQuery equivale a window.innerWidth en JavaScript nativo, por lo que ambas devuelven el tamaño del viewport, no el de la pantalla física completa.

Diferencias al detectar la resolución en móviles vs. escritorio

En móviles, el comportamiento de estas propiedades tiene sus particularidades, y conviene tenerlas en cuenta para evitar sorpresas:

• screen.height en móviles siempre devuelve el tamaño físico completo de la pantalla, sin importar la orientación o el contenido visible.
• window.innerHeight fluctúa constantemente: el teclado virtual, la barra de navegación del navegador al hacer scroll, o un cambio de orientación pueden modificar su valor en tiempo real. Evita usarlo para cálculos que necesiten ser estables.
• Para detectar cambios de orientación en móvil, es más fiable escuchar el evento screen.orientation.addEventListener("change", ...) que el clásico resize.

Cuando trabajé en un proyecto móvil, descubrí que el teclado virtual reducía el innerHeight drásticamente. Tardé un rato en entender por qué el diseño "bailaba" al hacer foco en un campo de texto. Desde entonces, para posicionamiento fijo en móviles, prefiero anclar los cálculos a screen.height o usar unidades CSS como dvh (dynamic viewport height).

¿Se puede detectar los DPI o pulgadas de pantalla con JavaScript?

Esta es una pregunta que aparece con cierta frecuencia. La respuesta corta es: indirectamente y con limitaciones. JavaScript expone la propiedad window.devicePixelRatio, que indica la relación entre píxeles físicos y píxeles CSS del dispositivo. En una pantalla Retina de Apple, por ejemplo, este valor suele ser 2.

console.log("Device Pixel Ratio:", window.devicePixelRatio);

Combinando window.devicePixelRatio con screen.width puedes estimar los píxeles físicos reales, pero calcular las pulgadas exactas no es posible de forma confiable desde el navegador, ya que JavaScript no tiene acceso al tamaño físico real del panel.

Preguntas frecuentes

• ¿Qué propiedad debo usar para responsive design?
  • Siempre window.innerWidth / window.innerHeight. Son las que reflejan el espacio real disponible para tu contenido y cambian en tiempo real al redimensionar la ventana.
• ¿Puedo detectar los DPI con JavaScript?
  • Sí, de forma aproximada usando window.devicePixelRatio, pero no es posible obtener los DPI físicos exactos del monitor desde el navegador por razones de privacidad y acceso al hardware.
• ¿Cómo detecto la resolución en tiempo real?
  • Escuchando el evento resize con window.addEventListener("resize", ...). Si quieres optimizar el rendimiento, aplica un patrón de debounce para evitar que el callback se dispare cientos de veces por segundo mientras el usuario arrastra el borde de la ventana.
• ¿Cuál es la diferencia entre screen.width y window.innerWidth?
  • screen.width es el ancho físico total del dispositivo y nunca cambia. window.innerWidth es el ancho del viewport, que varía al redimensionar el navegador. Para diseño web dinámico, casi siempre necesitas window.innerWidth.

✅ Conclusión

Detectar la resolución de pantalla en JavaScript no es tan simple como consultar screen.width: la clave está en saber exactamente qué tamaño necesitas en cada situación. Después de haber cometido varios errores usando propiedades equivocadas, entendí que diferenciar entre pantalla (screen), ventana del navegador (outerWidth) y viewport (innerWidth) lo cambia todo.

Si aplicas este enfoque con criterio, tus layouts dejarán de romperse, tus overlays funcionarán exactamente como esperas y tu código será mucho más predecible en cualquier dispositivo.