PROWAREtech

articles » current » javascript » browser-client-detection

JavaScript: Browser/Client Detection

Detect the browser and client that the end user is using.

Here is an object for client (browser/system) detection.

var clientInfo = function () {
	//rendering engines
	var engine = {
		ie: 0,
		gecko: 0,
		webkit: 0,
		khtml: 0,
		opera: 0,
		//complete version
		ver: null
	};
	//browsers
	var browser = {
		//browsers
		ie: 0,
		firefox: 0,
		safari: 0,
		konq: 0,
		opera: 0,
		chrome: 0,
		edge: 0,
		//specific version
		ver: null
	};
	//platform/device/OS
	var system = {
		win: false,
		mac: false,
		x11: false,
		//mobile devices
		iphone: false,
		ipod: false,
		ipad: false,
		ios: false,
		android: false,
		nokiaN: false,
		winMobile: false,
		//game systems
		wii: false,
		ps: false,
		xbox: false
	};
	//detect rendering engines/browsers
	var ua = navigator.userAgent;
	if (window.opera) {
		engine.ver = browser.ver = window.opera.version();
		engine.opera = parseFloat(engine.ver);
	} else if (/AppleWebKit\/(\S+)/.test(ua)) {
		engine.ver = RegExp["$1"];
		engine.webkit = parseFloat(engine.ver);
		//figure out if it’s Chrome or Safari
		if (/Edge\/(\S+)/.test(ua)) {
			browser.ver = RegExp["$1"];
			browser.edge = parseFloat(browser.ver);
		} else if (/Chrome\/(\S+)/.test(ua) || /CriOS\/(\S+)/.test(ua)) {
			browser.ver = RegExp["$1"];
			browser.chrome = parseFloat(browser.ver);
		} else if (/Version\/(\S+)/.test(ua)) {
			browser.ver = RegExp["$1"];
			browser.safari = parseFloat(browser.ver);
		} else {
			//approximate version
			var safariVersion = 1;
			if (engine.webkit < 100) {
				safariVersion = 1;
			} else if (engine.webkit < 312) {
				safariVersion = 1.2;
			} else if (engine.webkit < 412) {
				safariVersion = 1.3;
			} else {
				safariVersion = 2;
			}
			browser.safari = browser.ver = safariVersion;
		}
	} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
		engine.ver = browser.ver = RegExp["$1"];
		engine.khtml = browser.konq = parseFloat(engine.ver);
	} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
		engine.ver = RegExp["$1"];
		engine.gecko = parseFloat(engine.ver);
		//determine if it’s Firefox
		if (/Firefox\/(\S+)/.test(ua)) {
			browser.ver = RegExp["$1"];
			browser.firefox = parseFloat(browser.ver);
		}
	} else if (/MSIE ([^;]+)/.test(ua)) {
		engine.ver = browser.ver = RegExp["$1"];
		engine.ie = parseFloat(engine.ver);
	} else if (/rv:([^\)]+)\) like Gecko/.test(ua)) {
		engine.ver = browser.ver = RegExp["$1"];
		engine.ie = engine.gecko = parseFloat(engine.ver);
	}
	//detect browsers
	browser.ie = engine.ie;
	browser.opera = engine.opera;
	//detect platform
	var p = navigator.platform;
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
	//detect windows operating systems
	if (system.win) {
		if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
			if (RegExp["$1"] == "NT") {
				switch (RegExp["$2"]) {
					case "5.0":
						system.win = "2000";
						break;
					case "5.1":
						system.win = "XP";
						break;
					case "6.0":
						system.win = "Vista";
						break;
					case "6.1":
						system.win = "7";
						break;
					case "6.2":
						system.win = "8";
						break;
					case "6.3":
						system.win = "8.1";
						break;
					default:
						system.win = RegExp["$2"];
						break;
				}
			} else if (RegExp["$1"] == "9x") {
				system.win = "ME";
			} else {
				system.win = RegExp["$1"];
			}
		}
	}
	//mobile devices
	system.iphone = ua.indexOf("iPhone") > -1;
	system.ipod = ua.indexOf("iPod") > -1;
	system.ipad = ua.indexOf("iPad") > -1;
	system.nokiaN = ua.indexOf("NokiaN") > -1;
	//windows mobile
	if (system.win == "CE") {
		system.winMobile = system.win;
	} else if (system.win == "Ph") {
		if (/Windows Phone OS (\d+.\d+)/.test(ua)) {;
			system.win = "Phone";
			system.winMobile = parseFloat(RegExp["$1"]);
		}
	}
	//determine iOS version
	if ((p.indexOf("iPhone") == 0 || system.mac) && ua.indexOf("Mobile") > -1) {
		if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
			system.ios = parseFloat(RegExp.$1.replace("_", "."));
		} else {
			system.ios = 2; //can’t really detect - so guess
		}
	}
	//determine Android version
	if (/Android (\d+\.\d+)/.test(ua)) {
		system.android = parseFloat(RegExp.$1);
	}
	//gaming systems
	system.wii = /wii/i.test(ua);
	system.ps = /playstation/i.test(ua);
	system.xbox = /xbox/i.test(ua);
	//return it
	return {
		engine: engine,
		browser: browser,
		system: system
	};
}();
ie11
node-js
three-js
tutorial
JavaScript: About

The story of JavaScript.
JavaScript: Add Line Numbers to Preformatted Text

Automatically add line numbers to the HTML PRE element.
JavaScript: AJAX Library

A simple AJAX library for FormData and REST API.
JavaScript: AJAX Library for React

A simple AJAX library compatible with React.
JavaScript: AJAX Tutorial

A quick guide to Asynchronous JavaScript And XML (AJAX).
JavaScript: Analog Clock

Scalable analog clock made with HTML, CSS and JavaScript - no images required.
JavaScript: Animate-on-Scroll

Apply a CSS class to an element when it is scrolled into view to cause it to animate.
JavaScript: Auto-hide Text Sections That Are Too Long

Use HTML, CSS and JavaScript to better format a page by hiding large sections of text with a fade to a "read more" link that the user can choose to expand the text with. This is often used on user submitted comments.
JavaScript: Browser Window Utility

Find the true browser window size even if it has a scrollbar displayed.
JavaScript: Browser/Client Detection

Detect the browser and client that the end user is using.
JavaScript: Check for Mobile Device

How to determine if the browser is on a mobile device like Apple iPhone, Apple iPod, Google Android or Apple iPad including the iPad Pro with iPadOS version 15.x and 16.x or later.
JavaScript: Classes

Several ways to create classes.
JavaScript: Contact Form Creation Example

How to create a contact form using JavaScript createElement and appendChild procedures.
JavaScript: Cookie Utility

A utility to create, access and delete cookies from the browser.
JavaScript: Copy Text to Clipboard

How to copy text to the clipboard with Chrome, Edge, Firefox and Internet Explorer.
JavaScript: Determine HTML Element Position

Determine where an HTML object is on the screen.
JavaScript: Determine If an Element Has a Class

Determine if an HTML element has a class assigned to it.
JavaScript: Download Images with Progress Indicator Bar

How to download images to the browser while showing the user a percent completion of the download while they wait.
JavaScript: ES5 Array Methods

All the EcmaScript 5 Array Method Functions.
JavaScript: Event Utility

A utility for handling events in the browser.
JavaScript: How to Create WordPress Slugs

Create slugs with only standard characters for use in a URL or other purpose.
JavaScript: Is a Number a Power of Two (2)

How to check or determine if a number has a base of 2 without using modulo operations for maximum performance.
JavaScript: Lazy Load Images

Lazy load images; also works to know if an element has scrolled into view.
JavaScript: LERP - Linear Interpolation Function

A useful function for easing the transition between two values over time (examples included).
JavaScript: Make a Scroll Tracker for a Website

Use JavaScript, CSS and HTML to make a bar move across the screen of a website page to show the user where they are scrolled to.
JavaScript: Parallax Effect

Shift on x-axis and y-axis (horizontal and vertical) parallax effect library.
JavaScript: Parse Internet Links in Plain Text

Use Regex to parse Internet links in plain text and convert to HTML anchor elements.
JavaScript: Position HTML Element

Position a Speech Bubble (DIV Element) with object.getBoundingClientRect().
JavaScript: React without JSX

Learn React without using the large JSX framework.
JavaScript: Remove SCRIPT Elements from HTML

Use regular expressions to remove SCRIPT elements from HTML text.
JavaScript: REST API Tutorial

Understand how the REST API works with examples.
JavaScript: Reveal and Hide Password in HTML Textbox

Show or hide the password in HTML textboxes.
JavaScript: Slide-on-Scroll

Add a sliding effect to the page as it is scrolled.
JavaScript: Stop Developer Tools and the Inspect Element Option

How to disable F12 and Ctrl+Shift+I for developer tools and the inspect element context menu option on all browsers.
JavaScript: Tips and Tricks

Useful tips and tricks for the budding JavaScript programmer.
JavaScript: URI/URL Parser

Parse a URI/URL location; separate the parameters, hashtag; automatically generate arrays for multiple valued parameters.
JavaScript: Validate Credit Card Number

Use the Luhn Check to validate credit card numbers.
JavaScript: Validate Email Address

How to validate email addresses by checking their format using client-side code.
JavaScript: Whole Website Example

An idea for a whole website using mostly HTML/CSS with just a little JavaScript.
This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE