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, el 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 es una tecnologías fantástica que permite realizar muchas operaciones, entre ellas, calcular el ancho y alto de nuestra pantalla, en otras palabras, la resolución de pantalla.
Todo este procesamiento se realiza mediante el objeto screen, el cual permite obtener la resolución de la pantalla además de todo lo relacionado con la pantalla:
Existen diversas razones que se nos pueden presentar para querer obtener la resolución de la pantalla; disposición de los contenidos, información hacia el usuario, emplearlo en conjunto para realizar un overlay, etc. En esta entrada veremos cómo obtener la resolución de una pantalla con JavaScript nativo.
Qué significa “resolución” en JavaScript: pantalla, navegador y viewport
Antes de escribir una sola línea de código, necesitas tener claro qué demonios estás midiendo, 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:
- Pantalla real (screen): el tamaño total del dispositivo.
- Ventana del navegador (window): lo que ocupa la ventana en sí.
- Viewport (innerWidth/innerHeight): la zona visible donde se renderiza tu web.
Si sabes distinguirlos, evitarás el 90% de errores al trabajar con resoluciones.
- Diferencias entre screen, window y viewport
- Tipo Propiedades Qué mide Cuándo usar
- Pantalla screen.width / screen.height Tamaño físico total Estadísticas, mostrar info al usuario
- Navegador outerWidth / outerHeight Tamaño de la ventana Detectar resize del navegador
- Viewport innerWidth / innerHeight Área visible real Layout responsive, overlays, UI
Cómo obtener el ancho y largo de una pantalla (screen)
Como podemos ver en la siguiente figura, el objeto screen está compuesto de varios métodos y atributos.
Pero, en este artículo nuestro interés en ver ¿Cómo obtener la resolución de pantalla?
Con las siguientes líneas de código:
screen.width;
screen.height;De esta forma podemos obtener la resolución en pixeles de la pantalla compuesta por los componentes screen.width y screen.height (ancho y largo) de dispositivos como monitores, teléfonos, tablets, entre muchos otros.
Obtenemos la resolución de la pantalla del dispositivo.
Además de esto, contamos con otros dos métodos que nos permiten obtener la resolución del dispositivo sin contar con otros elementos o mejor dicho, interfaces como la barra de tareas de Windows, etc; es decir; el espacio disponible para mostrar el navegador web.
screen.availWidth; screen.availHeight;
Ejemplos de cómo obtener la resolución de pantalla con JavaScript
document.getElementById("widthYheight").innerHTML = "Mi resolución de pantalla es: "+screen.width + " px por "+screen.height;
document.getElementById("availwidthYavailheight").innerHTML = "El ancho y alto de mi pantalla para mi navegador web es: "+screen.availWidth + " px por "+screen.availHeight;Detectar cambio de tamaño de ventana con JavaScript
Ya teniendo claro cómo obtener la resolución de la pantalla (completa de nuestra PC) mediante el objeto screen en JavaScript, otro escenario posible que se te pueda presentar es cómo saber cuando se redimensiona la ventana de nuestro navegador y cual es la resolución o ancho/alto de la ventana del navegador; para lo primero en la API de JavaScript existe el evento onresize:
<body onresize="FuntionResize()">La cual se ejecuta cada vez que se redimensiona el navegador; para saber cuánto espacio en píxeles está ocupando la ventana del navegador tenemos las propiedades outerWidth y outerHeight provisto mediante el objeto window:
function FuntionResize() {
var widthBrowser = window.outerWidth;
var heightBrowser = window.outerHeight;
console.log("Tamaño de la pantalla del navegador: width=" + widthBrowser + ", height=" + heightBrowser);
}Cómo conocer el espacio disponible del navegador (screen.availWidth y screen.availHeight)
Estas propiedades son geniales si necesitas saber el espacio de pantalla no ocupado por elementos del sistema. Muchos no las usan, pero pueden marcar la diferencia en interfaces de escritorio.
console.log(screen.availWidth, screen.availHeight);Con esto obtienes el espacio “usable” para mostrar un navegador, sin contar barra de tareas, docks, etc.
Tamaño real del navegador: outerWidth, innerWidth y viewport
Aquí empieza lo realmente útil para una web moderna.
- Viewport: aquí es donde vive tu contenido.
- innerWidth y innerHeight: las dimensiones reales del área visible.
- outerWidth: toda la ventana del navegador (marcos incluidos).
console.log(window.innerWidth, window.innerHeight);Estas son las propiedades que se usan el 90% del tiempo. Si estás diseñando algo adaptable, este es tu terreno.
Extra: Detectar cambio de resolución con jQuery
jQuery es una librería que nos da un plus al momento de desarrollar nuestras aplicaciones; es ampliamente utilizado y es posible que el sitio que desarrollamos empleen esta tecnología; para saber cómo detectar el tamaño de la ventana cada vez que se redimensiona el navegador tenemos que:
$(window).resize(function() {
var widthBrowser =$(window).height();
var heightBrowser =$(window).width();
console.log("Tamaño de la pantalla del navegador: width="+widthBrowser +" height="+heightBrowser );
});Diferencias entre móvil y escritorio
En móviles, el viewport cambia incluso al mostrar el teclado.
screen.height en móviles es engañoso: siempre mide la pantalla completa.
innerHeight fluctúa; no lo uses para cálculos permanentes si hay teclado en juego.
Cuando trabajé en un proyecto móvil, descubrí que el teclado virtual cambiaba el viewport drásticamente. Tardé un rato en entender por qué el diseño “bailaba”.
Preguntas frecuentes
- ¿Qué propiedad debo usar para responsive design?
- Siempre innerWidth / innerHeight.
- ¿Puedo detectar DPI con JavaScript?
- Indirectamente sí, pero no es confiable.
- ¿Cómo detecto la resolución en tiempo real?
- Usa el evento resize.
✅ Conclusión
Detectar la resolución de pantalla en JavaScript no es solo consultar screen.width: es saber qué tamaño necesitas realmente. Después de haber cometido varios errores usando propiedades equivocadas, entendí que la clave es diferenciar entre pantalla, navegador y viewport.
Si aplicas este enfoque, tus layouts dejarán de romperse y tus overlays funcionarán como deben.
Acepto recibir anuncios de interes sobre este Blog.
En esta entrada veremos cómo obtener la resolución de una pantalla con JavaScript nativo, además veremos cómo detectar cambio de resolución del navegador cada vez que se reescala la ventana con JavaScript.