Hoy tuve una experiencia realmente desconcertante. Como de costumbre, utilicé window.innerWidth para medir el ancho del navegador, y programé para que isMobile = true si estaba por debajo de 768px. Realicé pruebas exhaustivas. Verifiqué que todo funcionara en varios dispositivos como iPhone, Galaxy, y navegadores como Safari, Chrome y Brave.

Sin embargo…

Un conocido me informó de repente que mi aplicación web se veía extraña en el navegador Samsung del Galaxy. "¿En serio?" pensé, pero al probarlo yo mismo, ocurrió una situación extraña: en el navegador Samsung, incluso en un entorno móvil, window.innerWidth < 768 resulta ser false.

No podía entenderlo. Es extraño que solo ocurra en el navegador Samsung, y descubrí que también da false en el modo de desarrollador de Chrome y Firefox en PC.

Varios intentos para resolver el problema

Inmediatamente probé otro método.

1. window.innerWidth

const isMobile = window.innerWidth < 768;

✅ Funciona normalmente en navegadores convencionales
❌ Devuelve false en el navegador Samsung y en modo desarrollador de Chrome/Firefox (fallido)

2. Agregar document.documentElement.clientWidth

const isMobile = (window.innerWidth || document.documentElement.clientWidth) < 768;

✅ Código lógicamente más seguro
❌ Todavía false en el navegador Samsung y en modo desarrollador (fallido)

3. Usar window.matchMedia('(max-width: 767px)')

const isMobile = window.matchMedia('(max-width: 767px)').matches;

✅ ¡Funciona correctamente en todos los navegadores! (¡éxito 🎉)

Con estos resultados, llegué a una conclusión.
De ahora en adelante, para determinar si es móvil, debo usar window.matchMedia.

¿Por qué ocurrió esto?

Para ser honesto, es difícil conocer la causa exacta sin mirar el código interno del navegador. Pero se puede especular.

1. Diferencias en el método de renderizado del navegador Samsung
   Aunque el navegador Samsung está basado en Chromium, tiene varias optimizaciones personalizadas. En este proceso, window.innerWidth puede comportarse de manera diferente en comparación con otros navegadores móviles convencionales.

2. Razón detrás de lo que sucedió en el modo desarrollador de Chrome & Firefox en PC
   Cuando se activa la función "Ver como pantalla móvil" en modo desarrollador, el navegador no solo ajusta el tamaño de la pantalla, sino que también altera varias configuraciones internamente. Sin embargo, no todos los entornos emulan un dispositivo móvil al 100% perfectamente. Esa podría ser la razón por la cual el valor de window.innerWidth en modo desarrollador funciona de manera diferente en comparación con un dispositivo real.

3. Diferencias en la inclusión o exclusión de la barra de desplazamiento
   window.innerWidth incluye el ancho de la ventana, pero document.documentElement.clientWidth devuelve el ancho real del contenido excluyendo la barra de desplazamiento.
   ¿Podría ser que el navegador Samsung maneje la barra de desplazamiento de manera diferente internamente? Sin embargo, esa hipótesis no podía explicar todos los fenómenos.

En conclusión…

De ahora en adelante, usemos matchMedia para verificar si es móvil

Esta experiencia me hizo darme cuenta de que métodos como window.innerWidth son poco confiables.
A partir de ahora, para determinar un entorno móvil, es más seguro utilizar matchMedia como el siguiente.

const isMobile = window.matchMedia('(max-width: 767px)').matches;

📌 Al usar este método
✅ Funciona correctamente en todos los navegadores.
✅ Consigue resultados consistentes en modo desarrollador.
✅ Funciona sin problemas en entornos peculiares como el navegador Samsung.

A veces, encuentros inesperados con errores como estos son parte del proceso de convertirnos en mejores desarrolladores. En cualquier caso, hoy gracias al navegador Samsung, me di cuenta de la necesidad de matchMedia. 😆