Detect Mobile Browsers in 3 Easy Steps


detect mobile browserSo you want to redirect that shinny new mobile site? No problem! I’ll show you how to detect mobile browsers in a few simple steps. When I first started designing mobile sites, I searched for the easiest way to redirect my sites and found a lot of fluff. I played around with different scripts and then found gold. The script below will detect a mobile browser and is super easy to implement.

Enough talk, let’s get into the good stuff:

Detect Mobile Browser Script Instructions

  1. Visit Detect Mobile Browser and download the script. Just right click on the Script link and click Save As. Save it to your desktop. (Rename the file to redirection_mobile.js if it has any other name)
  2. FTP into your site and make a folder in the root called js. My folder is located at http://mobilewebrockstar.com/js. Upload the file downloaded in Step 1.
  3. Now copy and paste this piece of code in between the <head> (A bunch of code will be here) </head> of your homepage:

    <script type="text/javascript" src="js/redirection_mobile.js"></script>
    <script type="text/javascript">
    SA.redirection_mobile ({param:"isDefault", mobile_prefix : "m", cookie_hours : "1" });
    </script>


    And that’s it! Super easy to do and you’ll be soon rocking your new mobile site.

Setup a Mobile Subdomain

After your phone detects a mobile browser you will need to redirect them somewhere. I send my sites/clients sites to a m.theirsite.com domain (subdomain). You might have already setup a mobile subdomain but if not, then here are the instructions. If you’re using CPanel (my host is HostGator and they use CPanel) then follow these steps. If not the process might be similar. If you’re not sure then email your web host that you want to create a subdomain and they should be able to sent you instructions.

  1. Log into your CPanel.
  2. Under Domains click Subomains.
  3. Type in m for the subdomain. IMPORTANT! I originally screwed this step up. Your root is going to be yoursite/m. Might even be (public_html/yoursite/m).
  4. Now just copy your mobile files to that m folder on your host. If you don’t have a m folder then create one in the root of your site.

You’re mobile subdomain is now setup and ready to rock!

Detect Mobile Browser VIDEO

It’s super easy to setup this detect mobile browser script. Just follow the instructions in the video.

The mobile web is exploding and will soon be the main way people view the internet. If you’re creating a mobile site for yourself or you clients then you need to redirect them to their mobile site. This is the quickest and easiest way I found to detect mobile browsers. I will update this page if I come across other solutions.

Still having a mobile redirect problem? Let us know and we’ll help you out.


19 comments… add one

  • Works fine for me when testing on iPhone, Blackberry, Opera Mini on an Android smartphone but not on the original Android browser :-(

    Reply
  • Excellent  and vid helped much
    You are a ROCKSTAR!!!

    Reply
  • Is there any truth to what I’m reading that I should put this as close to the opening head tag as possible so that no other script execute first?

    Reply
    • Sorry for the late reply. I’ve been suffering with the flu, not fun.

      For code like this I would include it in my tags. You want it to execute early on in the loading stage. I usually dump the something like Google Analytics code (or code that isn’t super important) into the end of my page in the tags.

      Reply
  • Using Javascript for mobile device detection bothers me. I would think it’s taking longer to process. For example, first the page has to load and execute the Javascript, then it has to redirect. Also, we have the potential problem of browsers with scripts turned off.

    I find, just using a PHP device detection using server side 301 redirect cuts all of that out.

    Reply
  • must be folder  m  not mobile…?

    Reply
  • Ok, where did you get the mobile files from to add to the m folder?  Is it from a mobile theme? I am new to all of this so very confused. lol

    Reply
  • Steve great tutorial! One question though; how can I have it so the mobile user can go back to the full site via a “View full site” button on my mobile site without them looping back to the mobile? I noticed you have a cookie in the code, could that be used to check to see if the user is coming from the mobile site?

    Thanks!!

    Reply
  • hello i have downloaded the js file and also uploaded the js into my website then i made a subdomain and uploaded the mobile website files into it then i copied the script as you had given into my website

    but when i check in my mobile the url doesnt change to m.url why so its not working please help me to sort out my issue

    Reply
  • David Sullivan May 6, 2013 10:31 pm

    You might mention that any prefix can be added to the js and script file, as some like to use “mobile” instead of “m.” I used “mobile” and everything worked great.
    David

    Reply
  • Currently the HTML you have down states “redirection_mobile.js”, while the actual script file is called “redirection-mobile.js”. (Hyphen instead of underscore). Once I noticed that, things seem to be working. Just wanted to let anyone wanting to use this info know, in case they’re having trouble =)

    Reply

Leave a Comment

Next Post: