Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Very basic MOBILE JavaScript browser detection? please read!

    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.
    Last edited by sethwb; 12-07-2010 at 06:38 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by sethwb View Post
    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.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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"/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simply JavaScript (JQuery) detection for mobile devices

    <!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>

    <!-- NOTE: You require both the jQuery core plugin and the jQuery.cookie.js plugin (code pasted in, below) -->
    <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>

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Update on Script (Win32 - comment out first!)

    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)*/

  • #8
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Harry Dance View Post
    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.

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,293
    Thanks
    10
    Thanked 583 Times in 564 Posts
    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)");}
    Last edited by rnd me; 03-30-2011 at 05:19 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •