Detect Android phone via Javascript / jQuery

JavascriptJqueryAndroid

Javascript Problem Overview


How would i detect that the device in use is an Android for a mobile website?

I need to apply certain css attributes to the Android platform.

Thanks

Javascript Solutions


Solution 1 - Javascript

Take a look at that : http://davidwalsh.name/detect-android

JavaScript:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
  // Do something!
  // Redirect to Android-site?
  window.location = 'http://android.davidwalsh.name';
}

PHP:

$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(stripos($ua,'android') !== false) { // && stripos($ua,'mobile') !== false) {
  header('Location: http://android.davidwalsh.name');
  exit();
}

Edit : As pointed out in some comments, this will work in 99% of the cases, but some edge cases are not covered. If you need a much more advanced and bulletproofed solution in JS, you should use platform.js : https://github.com/bestiejs/platform.js

Solution 2 - Javascript

How about this one-liner?

var isAndroid = /(android)/i.test(navigator.userAgent);

The i modifier is used to perform case-insensitive matching.


Technique taken from Cordova AdMob test project: https://github.com/floatinghotpot/cordova-admob-pro/wiki/00.-How-To-Use-with-PhoneGap-Build

Solution 3 - Javascript

;(function() {
	var redirect = false
	if (navigator.userAgent.match(/iPhone/i)) {
		redirect = true
	}
	if (navigator.userAgent.match(/iPod/i)) {
		redirect = true
	}
	var isAndroid = /(android)/i.test(navigator.userAgent)
	var isMobile = /(mobile)/i.test(navigator.userAgent)
	if (isAndroid && isMobile) {
		redirect = true
	}
	if (redirect) {
		window.location.replace('jQueryMobileSite')
	}
})()

Solution 4 - Javascript

I think Michal's answer is the best, but we can take it a step further and dynamically load an Android CSS as per the original question:

var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {
    var css = document.createElement("link");
    css.setAttribute("rel", "stylesheet");
    css.setAttribute("type", "text/css");
    css.setAttribute("href", "/css/android.css");
    document.body.appendChild(css);
}

Solution 5 - Javascript

js version, catches iPad too:

var is_mobile = /mobile|android/i.test (navigator.userAgent);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionXavierView Question on Stackoverflow
Solution 1 - JavascriptMichael LumbrosoView Answer on Stackoverflow
Solution 2 - JavascriptMars RobertsonView Answer on Stackoverflow
Solution 3 - JavascriptPhillip SennView Answer on Stackoverflow
Solution 4 - JavascriptdrlarsenView Answer on Stackoverflow
Solution 5 - JavascriptjonnyView Answer on Stackoverflow