Detecting mobile devices with JavaScript

To make the script compatible for mobile phone or tablets, we can rely on navigator.userAgent object. In case of using a mobile device this object will return the device name, otherwise it will return the browser name. The mini example below shows how it may be applied.

Example

Navigator.userAgent = "Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"

We can extract the widely used mobile phone names from this string, using a simple string match function as given in the example below.

Example of navigator.userAgent

<!DOCTYPE html>
<html>

<body>
	<script>			
		var navi = navigator.userAgent;
		if(navi.match(/Android/i)){
			document.write("Using: Android");
		}
		else if(navi.match(/BlackBerry|BB/i)){
			document.write("Using: Blackberry");
		}
		else if(navi.match(/iPhone|iPad|iPod/i)){
			document.write("Using: Apple device");
		}
		else if(navi.match(/IE/i)){
			document.write("Using: Windows device/IE");
		}
		else{
          document.write("Using: unknown phone");
		}
	</script>
</body>

</html>

›› go to examples ››

Detecting mobile devices with JavaScript

Example

Example of navigator.userAgent

Comments

About

Contact

Get Connected