User-Agent for Mobile Detection
How User-Agent strings are used for device detection — and why modern responsive design avoids it.
Published:
Tags: User-Agent mobile detection, browser UA device detection, responsive vs UA detection
User-Agent for Mobile Detection UA-based mobile detection was once the only way to serve different experiences to smartphones. CSS media queries and the Client Hints API have made it largely obsolete for layout decisions, but understanding how UA detection works — and why it's fragile — explains why so many legacy codebases still rely on it. --- All the tools discussed here are available for free at theproductguy.in — client-side, no sign-up required. Part of the HTTP Debugging Tools Guide — a complete toolkit for diagnosing web requests. --- How UA-Based Mobile Detection Works Servers read the request header and look for mobile-specific tokens: Common mobile-specific tokens in UA strings: | Token | Browser/Device | |-------|----------------| | | Safari or Chrome on iPhone | | | Safari or…
Frequently Asked Questions
How do websites detect mobile devices?
Websites detect mobile devices through two main approaches: UA string sniffing (reading the User-Agent header server-side or navigator.userAgent client-side) and CSS media queries (detecting viewport width, touch capability, or device pixel ratio). UA sniffing has been largely superseded by responsive design with media queries, which is more reliable and maintenance-free.
What User-Agent strings do mobile browsers send?
Mobile browsers include device-specific tokens in their UA strings. iOS Chrome sends an iPhone token and CriOS (Chrome for iOS). Android Chrome includes Android and the device model. Mobile Safari sends iPhone or iPad. The presence of 'Mobile' in the UA string is a common signal, though not universally reliable.
What is the client hints API?
The User-Agent Client Hints API (ua-ch) is a modern replacement for UA string parsing. Browsers send structured Sec-CH-UA headers with safe data (browser brand and version), and servers can request additional high-entropy hints (OS, architecture, device model) explicitly. This reduces passive fingerprinting while still enabling legitimate device detection.
Why is User-Agent sniffing unreliable?
UA strings are unreliable for several reasons: they can be spoofed by any HTTP client, they've historically contained outdated compatibility tokens (all browsers still say Mozilla/5.0), Chrome has gradually frozen parts of the UA to reduce fingerprinting, and the definition of 'mobile' is ambiguous for tablets, foldables, and large-screen phones.
What replaced User-Agent detection for mobile?
CSS media queries (@media (max-width: 768px), @media (pointer: coarse), @media (hover: none)) replaced UA detection for layout and styling. JavaScript feature detection (navigator.maxTouchPoints > 0, window.matchMedia) handles capability-based decisions. The Client Hints API handles the remaining cases that genuinely require structured device information.
All articles · theproductguy.in