Como Sites Detectam Dispositivos Móveis: Técnicas e Boas Práticas Modernas

Sites identificam dispositivos móveis usando múltiplos sinais de requisições HTTP e detecção client-side — não um único método.

Métodos Principais de Detecção

1. User-Agent String (Mais Comum, Legado)

• Enviado em todo cabeçalho requisição HTTP
• Contém: Navegador, SO, modelo dispositivo, versão
• Exemplo: 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
• Parsing: Regex para "Mobile", "Android", "iPhone", "iPad", "Phone"
• Falha: Spoofável, inconsistente, enorme manutenção

2. Client Hints (Padrão Moderno)

• Cabeçalhos estruturados: Sec-CH-UA, Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Model
• Sec-CH-UA-Mobile: ?1 = mobile; ?0 = desktop
• Controlado por Permissions Policy — usuário/site pode limitar
• Mais confiável, consciente de privacidade, padronizado

3. Detecção Tela e Viewport (CSS/JS)

• CSS Media Queries: @media (max-width: 768px), (pointer: coarse), (hover: none)
• JavaScript: window.innerWidth, screen.width, navigator.maxTouchPoints
• Device Pixel Ratio: window.devicePixelRatio (2x, 3x = mobile típico)
• Design responsivo usa isso — não UA sniffing

4. Detecção de Recursos

• Eventos toque: 'ontouchstart' in window
• Orientation API: window.orientation, screen.orientation
• Vibration API: navigator.vibrate (só mobile)
• Connection API: navigator.connection (tipo celular)

Como Sites Servem Experiências Móveis

Abordagem	Método	Prós/Contras
Design Responsivo	HTML/CSS único, media queries adaptam layout	✅ Uma base código, SEO-friendly, Google recomenda
Serviço Dinâmico	Servidor detecta dispositivo → serve HTML/CSS diferente mesma URL	⚠️ Header Vary: User-Agent necessário; complexidade cache
URL Mobile Separada	m.exemplo.com ou exemplo.com/mobile	❌ Depreciado: problemas SEO, manutenção, falhas redirect

Boa Prática Moderna

1. Design responsivo mobile-first (CSS Grid/Flexbox + media queries)
2. Progressive enhancement — núcleo funciona em todo lugar
3. Client Hints para otimização server-side (tamanho imagens, CSS crítico)
4. Evite UA sniffing — não confiável, frágil
5. Teste em dispositivos reais — Chrome DevTools device toolbar não basta

Detecção serve adaptação, não segregação. A melhor experiência mobile é uma bem projetada responsiva.

• Use Internet Móvel no Computador: Métodos de Tethering Comparados
• Como Conectar o Celular ao Computador: USB, Bluetooth e Wi-Fi