Tamaño de pantalla, ventana y página en JavaScript: 5 errores fatales y cómo evitarlos

El tamaño importa: por qué los scripts "rompen" el diseño

Imagina: escribes un sitio web adaptable perfecto, lo pruebas en tu portátil y todo funciona. Lo ejecutas en la tableta de un cliente y hay un error. Los elementos se superponen, la ventana modal se sale del borde de la pantalla y una galería ni siquiera se abre. ¿Te suena familiar?

La mayoría de las veces, la raíz del mal es obtener incorrectamente los tamaños de la pantalla, la ventana del navegador o la página misma. La pregunta "Get the size of the screen, current web page and browser window" en Stack Overflow ha acumulado cientos de miles de visitas. Y no es casualidad: incluso los desarrolladores experimentados confunden screen.width, window.innerWidth y document.documentElement.clientWidth.

En este artículo, analizaremos los 5 errores más comunes que cometen los principiantes (y no solo) al trabajar con tamaños en JavaScript. Obtendrás no solo teoría, sino también soluciones listas y probadas para problemas reales.

Top 5 errores al trabajar con tamaños en JavaScript

Error n.º 1: Usar screen.width en lugar de window.innerWidth

Esto es un clásico. El desarrollador quiere saber el ancho del área de visualización (viewport) y escribe:

// ❌ Incorrecto\nconst viewportWidth = screen.width;\nconsole.log(viewportWidth); // 1920 (¡pero esto no es el viewport!)\n

¿Cuál es el truco? screen.width devuelve el ancho físico del monitor en píxeles. No cambia si reduces la ventana del navegador o abres las herramientas de desarrollo. En cambio, window.innerWidth es el ancho del área de visualización (viewport), es decir, la parte de la ventana donde se muestra el contenido.

Cuándo rompe el sitio: Si calculas bloques adaptables con screen.width, al abrir DevTools o reducir la ventana, el sitio no se reajusta. El usuario ve un espacio vacío o elementos superpuestos.

// ✅ Correcto\nconst viewportWidth = window.innerWidth;\nconsole.log(viewportWidth); // Ancho actual del área visible\n

Error n.º 2: Olvidar la barra de desplazamiento (scrollbar)

El segundo error más común. El desarrollador obtiene la altura de la ventana e intenta colocar un elemento exactamente en el centro:

// ❌ Incorrecto\nconst windowHeight = window.innerHeight;\nelement.style.top = windowHeight / 2 + 'px';\n

A primera vista, todo parece correcto. Pero si el contenido es más largo que la pantalla y hay una barra de desplazamiento, window.innerHeight incluye su altura. Como resultado, el elemento puede "salirse" del borde inferior del área visible.

Solución: Usa document.documentElement.clientHeight — devuelve la altura del viewport sin incluir la barra de desplazamiento.

// ✅ Correcto para posicionar en el área visible\nconst viewportHeight = document.documentElement.clientHeight;\nelement.style.top = viewportHeight / 2 + 'px';\n

\n

Recuerda la regla: window.innerWidth/innerHeight — incluye la barra de desplazamiento. document.documentElement.clientWidth/clientHeight — sin incluir la barra de desplazamiento. Elige según la tarea.

\n

Error n.º 3: Confundir el tamaño de la ventana con el tamaño de la página

Quieres saber hasta dónde se ha desplazado el usuario y calculas la altura total de la página:

// ❌ Incorrecto\nconst pageHeight = window.innerHeight;\nconsole.log(pageHeight); // ¡Esto no es la altura de la página!\n

window.innerHeight es la altura de la ventana, no del documento. Para obtener la altura total de la página (incluyendo la parte desplazada), debes usar document.documentElement.scrollHeight.

Ejemplo real: Estás implementando un feed infinito (infinite scroll). Si usas window.innerHeight para determinar el momento de cargar nuevas publicaciones, el script se ejecutará una sola vez y no