Tecnología Electrónica

Cómo detectan los sitios web los dispositivos móviles: Técnicas y mejores prácticas modernas

Los sitios web identifican dispositivos móviles usando múltiples señales de solicitudes HTTP y detección del lado del cliente—no un solo método.

Métodos principales de detección

1. Cadena de User-Agent (Más común, legado)

  • Enviada en cada encabezado de solicitud HTTP
  • Contiene: Navegador, SO, modelo de dispositivo, versión
  • Ejemplo: Mozilla/5.0 (iPhone; CPU iPhone OS 17_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.2 Mobile/15E148 Safari/604.1
  • Análisis: Regex para "Mobile", "Android", "iPhone", "iPad", "Phone"
  • Defecto: Suplantable, inconsistente, enorme carga de mantenimiento

2. Client Hints (Estándar moderno)

  • Encabezados estructurados: Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Model
  • Sec-CH-UA-Mobile: ?1 = móvil; ?0 = escritorio
  • Controlado por Permissions Policy — el usuario/sitio puede limitar
  • Más confiable, consciente de la privacidad, estandarizado

3. Detección de pantalla y ventana gráfica (CSS/JS)

  • Consultas de medios CSS: @media (max-width: 768px), (pointer: coarse), (hover: none)
  • JavaScript: window.innerWidth, screen.width, navigator.maxTouchPoints
  • Relación de píxeles del dispositivo: window.devicePixelRatio (2x, 3x = típico móvil)
  • El diseño responsivo usa esto — no sniffing de UA

4. Detección de funciones

  • Eventos táctiles: 'ontouchstart' in window
  • API de orientación: window.orientation, screen.orientation
  • API de vibración: navigator.vibrate (solo móvil)
  • API de conexión: navigator.connection (tipo celular)

Cómo los sitios sirven experiencias móviles

EnfoqueMétodoPros/Contras
Diseño responsivoUn solo HTML/CSS, las consultas de medios adaptan el diseño✅ Una base de código, SEO amigable, recomendado por Google
Servicio dinámicoEl servidor detecta el dispositivo → sirve HTML/CSS diferente en la misma URL⚠️ Se necesita encabezado Vary: User-Agent; complejidad de caché
URL móvil separadam.example.com o example.com/mobile❌ Obsoleto: problemas de SEO, carga de mantenimiento, fallos de redirección

Mejor práctica moderna

  1. Diseño responsivo mobile-first (CSS Grid/Flexbox + consultas de medios)
  2. Mejora progresiva — lo esencial funciona en todas partes
  3. Client Hints para optimización del lado del servidor (tamaño de imagen, CSS crítico)
  4. Evita el sniffing de UA — poco fiable, frágil
  5. Prueba en dispositivos reales — la barra de herramientas de dispositivos de Chrome DevTools no es suficiente

La detección sirve para la adaptación, no la segregación. La mejor experiencia móvil es una bien diseñada responsiva.

>

<

Windows Mobile