Yogesh Chauhan's Blog

JavaScript: how to detect a browser using the user agent?

in JavaScript on July 27, 2021

Similar Post

How to detect if browser supports WebP format on server side PHP script?

A bad idea?

If you’re planning to server your users different pages based on their browser choices then yes, it’s a bad idea.

Keep your content same for all of your users no matter their browser choices.

If the browser doesn’t support some features then that’s a different story. But please don’t discriminate your users. There is already enough discrimination in the world already!

When it’s a good idea?

Different browsers have different standards even if they are using the same engine.

Let’s talk about a real life example. When you have an app that relies on the browser standards to render the page and to apply the style. Now, you want to create a PDF from that html rendered page and you’re using a third party library to create the PDF.

Let’s say Mozilla Firefox applies the height differently than Google Chrome and the PDF generated by both browsers are completely different. Now, if you detect the browser and apply a specific height for Mozilla Firefox, it solves the issue.

The example is simple and sometimes you have a bigger problems than that and to solve those, you might need to detect the browser and adjust your scripts.

You’re not changing the contents but changing your code in order to represent the contents consistently across the browsers.


The Navigator.userAgent property returns the user agent string for the browser the user is on to access your app.

We can make use of Navigator.userAgent to make a JavaScript function and detect the browser.

Take a look at more info on Navigator.userAgent


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to get front page or home page ID in WordPress?WordPressHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLA Step by Step Guide to Make RSS in XML For Any Website or Blog For FreeMiscellaneousDifferent Types of Functions in JavaScriptJavaScriptHow to progressively load images and add a blurry placeholder?CSSSome EASY-to-Understand CSS media query examplesCSS