Come i Siti Web Rilevano i Dispositivi Mobili: Tecniche e Best Practice Moderne
I siti web identificano i dispositivi mobili usando più segnali dalle richieste HTTP e dal rilevamento lato client—non un singolo metodo.
Metodi di Rilevamento Principali
1. Stringa User-Agent (Il Più Comune, Legacy)
- Inviata in ogni intestazione richiesta HTTP
- Contiene: Browser, OS, modello dispositivo, versione
- Esempio:
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 per "Mobile", "Android", "iPhone", "iPad", "Phone"
- Difetto: Spoofabile, inconsistente, enorme onere di manutenzione
2. Client Hints (Standard Moderno)
- Intestazioni strutturate:
Sec-CH-UA,Sec-CH-UA-Mobile,Sec-CH-UA-Platform,Sec-CH-UA-Model Sec-CH-UA-Mobile: ?1= mobile;?0= desktop- Controllato da Permissions Policy — utente/sito può limitare
- Più affidabile, attento alla privacy, standardizzato
3. Rilevamento Schermo e Viewport (CSS/JS)
- Media Query CSS:
@media (max-width: 768px),(pointer: coarse),(hover: none) - JavaScript:
window.innerWidth,screen.width,navigator.maxTouchPoints - Device Pixel Ratio:
window.devicePixelRatio(2x, 3x = tipico mobile) - Il design responsivo usa questo — non lo sniffing UA
4. Rilevamento Funzionalità
- Eventi tocco:
'ontouchstart' in window - API Orientamento:
window.orientation,screen.orientation - API Vibrazione:
navigator.vibrate(solo mobile) - API Connessione:
navigator.connection(tipo cellulare)
Come i Siti Offrono Esperienze Mobile
| Approccio | Metodo | Pro/Contro |
|---|---|---|
| Design Responsivo | Singolo HTML/CSS, media query adattano layout | ✅ Unica base di codice, SEO-friendly, raccomandato da Google |
| Serving Dinamico | Server rileva dispositivo → serve HTML/CSS diverso stesso URL | ⚠️ Intestazione Vary: User-Agent necessaria; complessità caching |
| URL Mobile Separato | m.example.com o example.com/mobile | ❌ Deprecato: problemi SEO, onere manutenzione, fallimenti reindirizzamento |
Best Practice Moderna
- Design responsivo mobile-first (CSS Grid/Flexbox + media query)
- Progressive enhancement — il core funziona ovunque
- Client Hints per ottimizzazione lato server (dimensionamento immagini, CSS critico)
- Evita UA sniffing — inaffidabile, fragile
- Testa su dispositivi reali — la barra dispositivi di Chrome DevTools non basta
Il rilevamento serve all'adattamento, non alla segregazione. La migliore esperienza mobile è un design responsivo ben progettato.