Detecting Browser with JavaScript
How to detect browser, OS, and device in JavaScript using userAgent, client hints, and feature detection.
Published:
Tags: browser detection JavaScript, JavaScript navigator.userAgent, JS device detection
Detecting Browser with JavaScript JavaScript provides several ways to detect the browser, OS, and device type. The right approach depends on what you actually need to know: for layout decisions, CSS media queries are better; for capability checks, feature detection is better; for analytics and UA-specific workarounds, parsing or using Client Hints is appropriate. --- 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. --- navigator.userAgent The simplest way to access browser identity: Raw UA parsing with regular expressions is fragile. Use a library: For mobile devices, is or . --- User-Agent Client Hints API The Client Hints API () is the…
Frequently Asked Questions
How do I detect the browser in JavaScript?
Read navigator.userAgent for the raw string, or use a library like ua-parser-js for structured results. For modern Chromium browsers, navigator.userAgentData.brands gives the browser name and version. For most use cases, feature detection (testing for specific APIs) is more reliable than browser detection.
What is navigator.userAgent?
navigator.userAgent is a read-only browser property that returns the User-Agent string the browser sends in HTTP request headers. It includes browser name and version, operating system, and rendering engine. Browsers increasingly freeze parts of this string to reduce fingerprinting, making it less reliable for precise version detection.
What is the User-Agent Client Hints API?
The User-Agent Client Hints API (navigator.userAgentData) provides structured browser and device information in Chromium-based browsers. It separates low-entropy safe data (browser brands, mobile flag) from high-entropy data (OS version, device model) that requires explicit user permission. It is the W3C-recommended replacement for UA string sniffing.
How do I detect touch devices in JavaScript?
Use navigator.maxTouchPoints > 0 for a reliable cross-browser check. The older 'ontouchstart' in window approach works but can return true on desktop Chrome's touch simulation. For CSS-based detection, @media (pointer: coarse) identifies touch-primary devices without JavaScript.
What is feature detection vs browser detection?
Browser detection checks which browser you're running in (Chrome, Firefox, Safari). Feature detection checks whether a specific API exists or works correctly. Feature detection is always preferred because it's forward-compatible, unaffected by UA freezing, works for non-mainstream browsers, and doesn't require maintaining a browser list.
All articles · theproductguy.in