Comment sites web détectent appareils mobiles : techniques & meilleures pratiques modernes
Les sites identifient appareils mobiles utilisant multiples signaux depuis requêtes HTTP et détection côté client — pas une méthode unique.
Méthodes détection principales
1. User-Agent String (Plus courante, legacy)
- Envoyé dans chaque en-tête requête HTTP
- Contient : Navigateur, OS, modèle appareil, version
- Exemple :
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 pour « Mobile », « Android », « iPhone », « iPad », « Phone »
- Défaut : Spoofable, incohérent, maintenance massive
2. Client Hints (Standard moderne)
- En-têtes structurés :
Sec-CH-UA,Sec-CH-UA-Mobile,Sec-CH-UA-Platform,Sec-CH-UA-Model Sec-CH-UA-Mobile: ?1= mobile ;?0= desktop- Contrôlé par Permissions Policy — utilisateur/site peut limiter
- Plus fiable, respectueux vie privée, standardisé
3. Détection écran & viewport (CSS/JS)
- Media Queries CSS :
@media (max-width: 768px),(pointer: coarse),(hover: none) - JavaScript :
window.innerWidth,screen.width,navigator.maxTouchPoints - Device Pixel Ratio :
window.devicePixelRatio(2x, 3x = mobile typique) - Design responsive utilise ça — pas sniffing UA
4. Détection fonctionnalités
- Événements tactiles :
'ontouchstart' in window - API Orientation :
window.orientation,screen.orientation - API Vibration :
navigator.vibrate(mobile seulement) - API Connection :
navigator.connection(type cellulaire)
Comment sites servent expériences mobile
| Approche | Méthode | Avantages/Inconvénients |
|---|---|---|
| Design Responsive | HTML/CSS unique, media queries adaptent layout | ✅ Une codebase, SEO-friendly, recommandé Google |
| Serving Dynamique | Serveur détecte appareil → sert HTML/CSS différent même URL | ⚠️ En-tête Vary: User-Agent nécessaire ; complexité cache |
| URL Mobile séparée | m.example.com ou example.com/mobile | ❌ Déprécié : soucis SEO, maintenance, échecs redirection |