Auto detect mobile browser (via user-agent?)

Question

How can I detect if a user is viewing my web site from a mobile web browser so that I can then auto detect and display the appropriate version of my web site?

Solution 1

Yes, reading the User-Agent header will do the trick.

There are some lists out there of known mobile user agents so you don't need to start from scratch. What I did when I had to is to build a database of known user agents and store unknowns as they are detected for revision and then manually figure out what they are. This last thing might be overkill in some cases.

If you want to do it at Apache level, you can create a script which periodically generates a set of rewrite rules checking the user agent (or just once and forget about new user agents, or once a month, whatever suits your case), like

RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} (OneMobileUserAgent|AnotherMobileUserAgent|...)
RewriteRule (.*) mobile/$1

which would move, for example, requests to http://domain/index.html to http://domain/mobile/index.html

If you don't like the approach of having a script recreate a htaccess file periodically, you can write a module which checks the User Agent (I didn't find one already made, but found this particularly appropriate example) and get the user agents from some sites to update them. Then you can complicate the approach as much as you want, but I think in your case the previous approach would be fine.

Solution 2

There are open source scripts on Detect Mobile Browser that do this in Apache, ASP, ColdFusion, JavaScript and PHP.

Solution 3

Just a thought but what if you worked this problem from the opposite direction? Rather than determining which browsers are mobile why not determine which browsers are not? Then code your site to default to the mobile version and redirect to the standard version. There are two basic possibilities when looking at a mobile browser. Either it has javascript support or it doesn't. So if the browser does not have javascript support it will default to the mobile version. If it does have JavaScript support, check the screen size. Anything below a certain size will likely also be a mobile browser. Anything larger will get redirected to your standard layout. Then all you need to do is determine if the user with JavaScript disabled is mobile or not.
According to the W3C the number of users with JavaScript disabled was about 5% and of those users most have turned it off which implies that they actually know what they are doing with a browser. Are they a large part of your audience? If not then don't worry about them. If so, whats the worst case scenario? You have those users browsing the mobile version of your site, and that's a good thing.

Solution 4

Here's how I do it in JavaScript:

function isMobile() {
  var index = navigator.appVersion.indexOf("Mobile");
  return (index > -1);
}

See an example at www.tablemaker.net/test/mobile.html where it triples the font size on mobile phones.

Solution 5

My favorite Mobile Browser Detection mechanism is WURFL. It's updated frequently and it works with every major programming/language platform.

View more solutions

Comments

[Seva Alekseyev]

Does iPad count? :)

[spaaarky21]

Seva's comment brings up a good question. What does "mobile" really mean today? Does it refer to a "feature phone" that has a browser but not much of one? Does it refer to full featured smart phones where the input method and display resolution are limiting factors? How about tablets that are both easy to interact with and have high resolution displays? How about devices like media centers - they never leave the livingroom but they have similar limitations. A friend at work sent me this. I found it very insightful. slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiib‌​u

[Ricki]

But the ipad is a tablet.. and uses safari for default, it is unlikely youd want to count the ipad

[TJ Ellis]

@Ricki but on the ipad you still cannot e.g. display flash content or use a javascript-based rich text editor like tinymce.

[Ricki]

@TJ Ellis really? I thought the ipad2 could handle flash. Thats a good point then, but there are ways around that. Such as HTML5's video & canvas options for a ipad compatible site as safari has HTML5 capabilities.

[TJ Ellis]

@Ricki perhaps ipad2 can? I'm not sure, I don't have one myself, but my boss has an ipad of some kind and I know he cannot view flash...

[Shaun]

ipad cannot view flash, but thats a different topic, like detect if browser supports flash.

[Vael Victus]

Just a post from the future, but anyone interested in serving a mobile version of their site may be interested in some articles on "responsive design".

[Stephen Jenkins]

I'd highly suggest using Conditionizr, you can add your own tests and they have a load of tests available too: conditionizr.com/detects

[Admin]

Can this be accomplished at the web server layer (Apache) through some type of .htaccess command - instead of using PHP?

[Admin]

Can this be accomplished at the web server layer (Apache) through some type of .htaccess command - instead of using a scripting language like PHP?

[Maxim Veksler]

This is a very good idea, I think it's an elegant solution.

[guitar-]

This failed on my phone (Samsung u550 using Verizon Wireless).

[Adam Tuttle]

@guitar If that's the case then you should send in your UA.

[赵君君]

if you want to merge your accounts see here: meta.stackexchange.com/questions/18232/…

[We Are All Monica]

Bleh... I really dislike the "code smell" of these solutions. Regex matching using a bunch of 4-character prefixes with no clue regarding where they originally came from... no thanks.

[Jack Cox]

That is one knarly regex statement. I agree, the code smell is not good on this one.

[creativeedg10]

Is Mobile Device Browser still working? I notice that there is a notation about it being offline?...

[Adam Tuttle]

I think this is actually the best way to go. Scripts that look at User Agent strings are destined to get out of date. Looking at available screen real estate allows responsive design without any worry of new devices not being detected.

[Eduardo]

I aso don;t like "Open Source" solutions without License and no indication of updates.

[Kyle]

There's no way around it though. At some level any type of solution is going to do a regex check on the user agent.

[Kyle]

It's good, but the statement "works with every major programming/language platform" is a little bold.

[MarkJ]

It's also no longer free.

[MarkJ]

It is now only available under the pesky AGPL licence, unless you buy it. en.wikipedia.org/wiki/WURFL#License_update

[Mikey G]

+1 this sounds like a pretty sweet idea, but would this affect search engine crawlers?

[Jonas G. Drange]

What module to use: neilb.org/reviews/user-agent.html

[Igor Brejc]

This only works for client-side detection. But if you want your server side to behave differently for mobile clients, you'll need to use some other technique.

[bozdoz]

I found this quite helpful.

[Stephen Jenkins]

For a more manageable solution, you can use Conditionizr which will handle all this for you! You can add custom tests, fetch them via object tests and having callbacks. They've also got a range of premade tests available: conditionizr.com/detects

[Stephen Jenkins]

You should definitely check out Conditionizr which will handle all this for you! You can add custom tests, fetch them via object tests and having callbacks. They've also got a range of premade tests available: conditionizr.com/detects

[Stephen Jenkins]

Using .match is wrong here, you want to be using .test() which evaluates to a boolean value, it's also much faster than .match() and doesn't return an array. For a more manageable solution to your userAgent testing, you can use Conditionizr which will handle all this for you! You can add custom tests, fetch them via object tests and having callbacks. They've also got a range of premade tests available: conditionizr.com/detects

[Si8]

This won't work when it comes to tablet (e.g. iPad)

[nefski]

Elenasys, thank you for useful answer. Although, I can't find any UA matching "windows\sce" in my db.

[mgutt]

Use "mobi" because of Opera Mobile.

[mgutt]

And you need "Opera Mini" as this is one of the rare browsers not using "mobi" in the User Agent.

[jwerre]

This does not work for windows phones.

[Jorgesys]

thank you but Windows phone was not specified...

[Andy]

Given the apparently huge number of browsers that regex tries to detect, and the fact that it has to be constantly updated, I really hope they come up with a simple browser API for this. Or specifically, a way to query if the device will provide an onscreen keyboard, so I can avoid focusing inputs if it will trigger that.

[ʇsәɹoɈ]

This is a misguided idea. Browser extensions that disable javascript are very popular on desktop browsers, so assuming that no javascript means mobile is just plain wrong. Window/viewport/screen resolution has nothing to do with a browser's size, and assuming that low resolution indicates handheld size will make your web app ugly and frustrating to many users. (For example: desktop browsers in non-full-screen windows, large tablets.)

[ʇsәɹoɈ]

This fails miserably for desktop browsers that aren't running full-screen. If you choose to do it anyway, please don't waste screen space with enormous fonts and margins, or hide important functionality/information behind drop-down menus. It will make your site/app ugly and frustrating to some of your users.

[Carson]

any idea to set document root by user-agent