Shaun Mccran

My digital playground

04
J
U
N
2010

Simple Coldfusion script to detect if a user is on a Mobile platform

After all the 'mobile talk' at the recent Scotch on the Rocks conference my interest was piqued into looking at mobile versions of sites, and how we as developers can try and seamlessly integrate mobile platforms into our web applications.

The article deals with the first step of that, which is detecting if your user is hitting your site on a mobile platform.

There is a full example of this here: http://www.mccran.co.uk/examples/detect/, hitting this URL with an iPhone or Android device will serve up a different response.

It hadn't struck me before Serge Jespers Scotch on the Rocks talk that you could quite easily pick up the users browser version in the CGI scope using Coldfusion. This value pretty much always contains the Operating System name as well.

As a test I created a script that would email me the correct CGI value, just so I could catalogue the responses from the different devices.

Android request:

view plain print about
1Mozilla/5.0 (Linux; U; Android 2.1-update1; en-gb; HTC Desire 1.15.161.4 Build/ERE27) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Iphone request:

view plain print about
1Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7E18 Safari/528.16

IE 8 request:

view plain print about
1Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

Firefox request:

view plain print about
1Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9 ( .NET CLR 3.5.30729)

Next it's a simple case of finding a distinct value in the cgi.http_user_agent string, and redirecting. In this way you could tailor the mobile experience to different markets.

view plain print about
1<cfif findNoCase('Android', cgi.http_user_agent,1)>
2    <!--- relocate to Android version of the mobile site --->
3    <cflocation url="android/">
4<cfelseif findNoCase('iPhone', cgi.http_user_agent,1)>
5    <!--- relocate to iphone version of the mobile site --->
6    <cflocation url="iphone/">
7</cfif>

There is a full example of this here: http://www.mccran.co.uk/examples/detect/, hitting this URL with an iPhone or Android device will serve up a different response.

TweetBacks
Comments
Ben Nadel's Gravatar I know it might not be considered "mobile", but I figured I throw the iPad user agent up here as well (I just copied it from another site):

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
# Posted By Ben Nadel | 10/06/10 19:22
Shaun McCran's Gravatar Hi Ben,
Good call on the iPad User Agent, I think your right, in that it will become a common mobile browsing platform, and I guess it has its own screen dimensions and functionality, so whatever App you are writing could be tailored to it.

(Glad you copied and pasted the code, thought for a second you'd durned to the 'dark side' and bought one!)
# Posted By Shaun McCran | 11/06/10 13:07
Ben Nadel's Gravatar @Shaun,

No problem. Also, I am not sure why, but someone was telling me at the CFUG that Google Voice thinks the iPad is the iPhone and keeps asking for his phone number. Very odd! Maybe Google sees "WebKit" as the "mobile" browser.
# Posted By Ben Nadel | 11/06/10 13:47
John Glynn's Gravatar What about blackberry - I think it is:
Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, Like Gecko) Version/6.0.0.141 Mobile Safari/534.1+

I do not have a blackberry so I cannot test this. Anybody?
# Posted By John Glynn | 15/02/11 16:21
Shaun McCran's Gravatar Hi @John,

BlackBerry is certainly worth looking into, especially with the market share it has. I want to spend a bit more time with this and detect some of the new tablet devices as well.

I'll try the BlackBerry simulator, hopefully it will spoof the device type: http://us.blackberry.com/developers/resources/simu...
# Posted By Shaun McCran | 15/02/11 16:55
John Glynn's Gravatar By the way, your script is working terrifically! I develop all flash sites (I don't want to hear it, the sites come with an extreme content management system that I could not develop in any other language, and the google analytics reporting control is wonderful ...). Anyway, for iPads and other mobile devices, many of my sites automatically generate a coldfusion version (www.alwaysposh.com). Your script for detecting the user's browsing situation has been the most accurate I have tried so far, and with the least amount of code to boot!! Thanks for posting it:)
# Posted By John Glynn | 16/02/11 13:58
Duy's Gravatar how do you detect whether or not it is a android tablet or android phone?
# Posted By Duy | 27/03/12 12:41
Shaun McCran's Gravatar Hi,
You could use the screen resolution, but that isn't a hard and fast rule with phone screens getting bigger now.

I give the user the option to switch between mobile or normal, I use a tablet a lot and its horrible to be forced to use a mobile version of a site on it.
# Posted By Shaun McCran | 27/03/12 13:20
duy's Gravatar that's what i'm trying to do. i am trying to force people with tablet to use regular site and people with phone or ipod to use mobile site
# Posted By duy | 28/03/12 18:26
John Glynn's Gravatar I would consider responsive web design, that way you are not having to maintain multiple version of a site.
http://www.catswhocode.com/blog/awesome-tutorials-...
# Posted By John Glynn | 29/03/12 11:08
Shaun McCran's Gravatar @John, thats a much better idea for the long term. It can be very tricky applying responsive web design retrospectively to a project though, in my experience its something that has to be planned for up front otherwise things start feeling very hacky very quickly.

This sort of thing really separates the designers from the dabblers too :-)
# Posted By Shaun McCran | 01/04/12 14:10
John Glynn's Gravatar Hey Shaun,

I agree. Retro-fitting a site to be responsive maybe a mess in the end. I also use the cflocation tag combined with findNoCase to sniff for devices on a couple of sites.
# Posted By John Glynn | 02/04/12 06:41
Back to top