Very basic MOBILE JavaScript browser detection? please read!

sethwb · 12-07-2010, 06:34 PM

Hello,

Is there a way with JavaScript to easily detect which mobile browser is being used? I would not normally ask this, but because we do not have the time or budget to implement any back end detection scripting it is our only option right now!

I don't think we will need to detect which version of the browser, or which revision of the phone is used - just need to target each family to deliver the proper video type.

Philip M · 12-07-2010, 06:42 PM

http://www.hand-interactive.com/reso...javascript.htm

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

sethwb · 12-07-2010, 07:02 PM

thank you philip.

i'm consolidating this code to give it a shot.. i was just thinking though - do you know of a way to simply detect whether the file format is supported using javascript in a way similar to object detection? I do apologize for these strange constraints, but the business has decided on these plans already and the system we are required to use does not support back end scripting... here's the kicker: they declined 3rd party detection.

*sigh*

I must make the best with my position and what I have available so I appreciate your help immensely.

Philip M · 12-07-2010, 07:05 PM

Quote:

Originally Posted by sethwb

I must make the best with my position and what I have available so I appreciate your help immensely.

That link is about as much as I know about mobile detection. Suffice to say that it is pretty unreliable using Javascript. Simple advice - use PHP.

Old Pedant · 12-07-2010, 08:12 PM

Last place I worked, we used WURFL for a while. It's the best of the free solutions. (We hosted it via JSP, but I believe it can be hosted on PHP.) We finally abandoned it in favor of a paid solution ($5,000 per year), but it was running a close second to the paid solution.

But as Philip said, there isn't any really good JS-based solution. You'd be amazed at how many mobile devices just don't properly support JS, for starters. If you don't care about such low-end devices, maybe you can get away with JS, but you're abandoning a pretty good sized chunk of the market by doing so.

And if the idiots you are doing this for can't understand that, well...there are other people out there you can work for who will be more likely stay in business. <grin style="sickly"/>

Harry Dance · 03-29-2011, 10:14 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic mobile device JavaScript (jQuery) detection</title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
/* Cookie plugin - Copyright (c)2006 Klaus Hartl (stilbuero.de). Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php. http://www.gnu.org/licenses/gpl.html */
jQuery.cookie=function(name,value,options){if(typeof value!='undefined'){options=options||{};if(value===null){value='';options.expires=-1;}var expires='';if(options.expires&&(typeof options.expires=='number'||options.expires.toUTCString)){var date;if(typeof options.expires=='number'){date=new Date();date.setTime(date.getTime()+(options.expires*24*60*60*1000));}else{date=options.expires;}expi res=';expires='+date.toUTCString();}var path=options.path?';path='+(options.path):'';var domain=options.domain?';domain='+(options.domain):'';var secure=options.secure?';secure':'';document.cookie=[name,'=',encodeURIComponent(value),expires,path,domain,secure].join('');}else{var cookieValue=null;if(document.cookie&&document.cookie!=''){var cookies=document.cookie.split(';');for(var i=0;i<cookies.length;i++){var cookie=jQuery.trim(cookies[i]);if(cookie.substring(0,name.length+1)==(name+'=')){cookieValue=decodeURIComponent(cookie.substring( name.length+1));break;}}}return cookieValue;}};
/* Cookie plugin, ends */

function checkForHandhelds(){
var redirectURL = "http://www.google.co.uk/";
var uagent = navigator.userAgent.toLowerCase();

function isHandheld(){//return boolean
return (
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1) ||
(navigator.platform.indexOf("iPad") != -1) ||
(uagent.search("symbian") != -1) ||
(uagent.search("android") != -1) ||
(uagent.search("windows ce") != -1) ||
(uagent.search("blackberry") != -1) ||
(uagent.search("palm") != -1) ||
(navigator.platform.indexOf("Win32") != -1)
);
}

if( $.cookie('handheld_redirect') == null ){//first visit: redirect IF a modern handheld
if(isHandheld()){//is handheld & set cookie to remember, then redirect
$.cookie("handheld_redirect", "true");//$.cookie("handheld_redirect", "true", { path: '/' });
window.location = redirectURL;
}else{
$.cookie("handheld_redirect", "false");
}
}
else if ($.cookie("handheld_redirect") === "true"){//= true, is handheld
window.location = redirectURL;
}
else if ($.cookie("handheld_redirect") === "false"){//prefers std site
//do nothing
}
}

$(document).ready(function(){
$.cookie("handheld_redirect", null);//uncomment to clear cookie
checkForHandhelds();
});
</script>

</head>

<body>
<p>The page.</p>
</body>
</html>

Harry Dance · 03-29-2011, 10:22 AM

Note, concerning the posted mobile detection script:

Comment out (remove) the 'Win32' line, as this is just for testing (on a windows machines).

Like this:

(uagent.search("palm") != -1) /* ||
(navigator.platform.indexOf("Win32") != -1)*/

Harry Dance · 03-29-2011, 11:07 AM

Quote:

Originally Posted by Harry Dance

Note, concerning the posted mobile detection script:

Comment out (remove) the 'Win32' line, as this is just for testing (on a windows machines).

Like this:

(uagent.search("palm") != -1) /* ||
(navigator.platform.indexOf("Win32") != -1)*/

And comment out the 'cookie null' line, like this:
//$.cookie("handheld_redirect", null);

as this will clear the cookie each time and is useful for testing.

rnd me · 03-30-2011, 05:06 AM

add classes to HTML, you can then easily hit browsers using css/jQuery:

Code:

(function classyBrowser(d){
	var x="", ua=navigator.userAgent+x;
	if("v"=="\v"){d.className+=" ie"; } //legacy ie
	if(x=ua.match(/(MSIE|Safari|Chrome|Opera|Firefox)\D(\d+)/)){d.className+=(" "+x[1]+" _"+x[2]).toLowerCase();   }
	if(x=ua.match(/(mobile|ios|ipad|ipod|iphone|android)/ig)){d.className+=(" "+x.slice(1).join(" ").toLowerCase());   }
}(document.documentElement));

for example:

Code:

object, video { display:none; }
.ios video{ display: block;}
.android object {display: block;}

in code, you can check for these classes using match:

Code:

if(document.documentElement.className.match("android")){alert("android detected");}

//or to make it easier, create a shortcut:
window.browser = document.documentElement.className;

// ...

if(browser.match("ipad")){alert("ipad detected");}

versions are also added: "_" + versionNumber, _7 for ie7, _4 for firefox4, etc...

Code:

if(browser.match("msie") && browser.match("_7")){  alert("IE 7 detected (gasp)");}