Standard way to detect mobile browsers in a web application based on the http request

C

19

59

We are beginning to go down the path of mobile browser support for an enterprise e-commerce webapp (Java/Servlet based). Of course there are many decisions to be made, but it seems to me the cornerstone is to be able to reliably detect mobile browsers, and make decisions on the content to be returned accordingly. Is there a standard way to make this determination (quickly) based on the http request, and ideally glean more information about the given browser and device making the request (screen size, html capabilities, etc?).

I would also appreciate any supplemental information that would be of use from someone who has gone down this path of taking an existing large scale enterprise webapp and architect-ing out mobile browser support from the development side.

[edit] I certainly understand the request header and the information about a database of standard user agents is a great help. For those talking about 'other' request header properties, if you could include similar standardized name / resource of values that would be a big help.

[edit] Several users have proposed solutions that involve a call over the wire to some web service that will do the detection. While I'm sure this works, it is not a good solution for an enterprise e-commerce site for two reasons: 1) speed. A call over the wire for every page request to a third party would have huge performance implications. 2) dependency/legal. We'd tie our website response time and key functionality to their service, which is horrible for legal and risk reasons.

Christian answered 26/9, 2008 at 22:4 Comment(1)

You can see some ideas in #6844520 – Monandrous 6/8, 2011 at 14:56

K

42

Wouldn't the standard way be to check the user agent? Here's a database of user agents you can use to detect mobile browsers.

Katzir answered 26/9, 2008 at 22:7 Comment(5)

I didn't realize there was an actively maintained reference for these. Thanks. – Christian 2/10, 2008 at 5:43

WURFL for java is a mess. Good luck finding an the given Java bindings for download. – Fleawort 24/5, 2011 at 0:40

WURFL is a memory hog. And 15 MB XML? But it does what it says. – Jedjedd 1/2, 2012 at 7:13

You could try 51degrees.mobi available at (51degrees.codeplex.com) or via ApacheMobileFilter (fiftyone.apachemobilefilter.org). The binary data format is very efficient. – Placeman 22/2, 2012 at 10:20

Please note that you cannot use this file for commercial purpose without a license. – Poulenc 19/1, 2014 at 14:7

B

20

@David's answer mentioned using WURFL -- which is probably your best option. Be forewarned, however, the success rate is usually around 60% (from mine and other's experience). With carriers changing UA's constantly and the amount of device profiles that exist (60,000+ ?), there's no bulletproof way to get all the right data you want.

Just a bit of warning before relying heavily on a device DB. I would try to keep the user's options open by allowing them to change session options in case i've guessed wrong.

Barrows answered 4/10, 2008 at 0:13 Comment(1)

+1 for the advice to allow the user to choose there own experience – Weimer 3/5, 2011 at 4:52

C

8

You can use Modernizer to detect browser abilities

Cachalot answered 3/9, 2010 at 0:13 Comment(0)

C

6

While you could detect a mobile browser through it's user agent the browser war on the PC platform has shown that sniffing user agents isn't really such a good thing to do.

What ideally should be done is that specific styles should be applied based on media type or that a different answer should be sent based on a header other than the user agent - such as the Accept-header which tells which kind of content that the browser prefers.

Right now it might be enough to code a site that works with the iPhone and with Opera through browser sniffing - but Googles Android is coming any minute now and there are many other mobile phones that will have browser functionality close to the iPhone's in the near future and it would be a waste to develop a mobile website that didn't support those devices as good as possibel from scratch.

Clippers answered 26/9, 2008 at 22:17 Comment(0)

C

6

After days of searching for the right way of detecting a mobile device I've decided to keep it simple [ stupid ] and i shall put a 'Mobile device site' button on my index page.... it's only one click away!!

Combo answered 25/8, 2010 at 11:56 Comment(0)

Q

4

This article (and its follow-up) seems nice.

Quitrent answered 26/9, 2008 at 22:11 Comment(0)

Z

4

Detect Mobile Browsers - snippets in various programming languages.

Zyrian answered 31/5, 2012 at 9:13 Comment(0)

S

3

The following light weight Apache configuration does a pretty good job and remembers user preference if they prefer the PC version

<VirtualHost (your-address-binding)>   

  (your-virtual-host-configuration)       

  RewriteEngine On     
  RewriteCond %{QUERY_STRING} !ui=pc
  RewriteCond %{HTTP_COOKIE} !ui=pc
  RewriteCond %{HTTP_USER_AGENT} "^.*(iphone|ipod|ipad|android|symbian|nokia|blackberry| rim |opera mini|opera mobi|windows ce|windows phone|up\.browser|netfront|palm-|palm os|pre\/|palmsource|avantogo|webos|hiptop|iris|kddi|kindle|lg-|lge|mot-|motorola|nintendo ds|nitro|playstation portable|samsung|sanyo|sprint|sonyericsson|symbian).*$" [NC,OR]

  RewriteCond %{HTTP_USER_AGENT} "^(alcatel|audiovox|bird|coral|cricket|docomo|edl|huawei|htc|gt-|lava|lct|lg|lynx|mobile|lenovo|maui|micromax|mot|myphone|nec|nexian|nook|pantech|pg|polaris|ppc|sch|sec|spice|tianyu|ustarcom|utstarcom|videocon|vodafone|winwap|zte).*$" [NC] 

  RewriteRule /(.*) http://bemoko.com/$1 [L]

  RewriteCond %{QUERY_STRING} "ui=pc"
  RewriteRule ^/ - [CO=ui:pc:(your-cookie-domain):86400:/]
  RewriteCond %{QUERY_STRING} "ui=default"
  RewriteRule ^/ - [CO=ui:default:(your-cookie-domain):86400:/]
</VirtualHost>

More background on this @ http://bemoko.com/training.team/help/team/pc-to-mobile-redirect

Skelp answered 2/11, 2011 at 23:33 Comment(0)

T

2

I propose a free detection system which is based on uaprof and user agent: http://www.mobilemultimedia.be UAprof should be the primary key for detection when it's available as there are usually multiple user agents for the same uaprof. If you want to manage this on your own, you should then go for Wurfl because you can download the entire database and manage it locally by yourself.

Transhumance answered 30/6, 2009 at 11:33 Comment(0)

M

2

When I had a similar need recently, I found this code that uses HTTP_X_WAP_PROFILE, HTTP_ACCEPT, and HTTP_USER_AGENT to identify a browser as mobile or non-mobile. It's PHP but could be converted fairly easily into whatever you need (I implemented it in VBScript for classic ASP).

Ironically, it turned out that I didn't end up using the code because we decided to provide specific URLs for mobile and non-mobile users, but it certainly worked when I was testing it ...

Metallophone answered 12/10, 2009 at 15:50 Comment(0)

T

1

You will get most of the information like browser, device, accepted languages, accepted formats etc from the request header. The user agent mentioned above is part of the request header.

Tirrell answered 26/9, 2008 at 22:12 Comment(0)

A

1

OK, here is a very simple answer - how about letting the user decide? on your login to your ap, provide a link to the mobile site. on the mobile site, provide a link "back to the main site" - try www.fazolis.com on your mobile device - they do a good job of this.

then, on the link to the mobile site from the browser site, register their "vote" and their user agent. You can build your own reliable list of YOUR clients who want the mobile site. Use this married to specs on screen size for these mobile devices, and you can build some pretty good logic for a satisfactory user experience. I would NEVER post out to a network source for something as elementary as this.

Oh and on your "mobile site" - if you write your ap semantically well, then you should be able to present a single site for both mobile and browser vs. having to write two separate page sets. Just something to think about - this is worth the extra thought and effort to save time later.

Allegorist answered 24/5, 2011 at 23:18 Comment(0)

S

1

I can't see it posted on here, but another option I am looking into currently is www.detectmobilebrowser.com

Scholasticism answered 18/10, 2011 at 13:48 Comment(0)

D

1

The easiest way is to create an array with regular tags associated with mobile browsers. At least most mobile user agents must have the word mobile, mini, nokia, java ME, android, iphone, mobile OS, etc. If any is matched with the user agent, using php strpos, print a mobile button on top of the page. Leave the user to choose. I love full site cos my mobile browser gives me the same experience, except that I need to zoom or scroll most of the times.

Dartmouth answered 29/2, 2012 at 13:57 Comment(0)

L

0

You will have to check the user agent string with a previously defined list, like this one

Lendlease answered 26/9, 2008 at 22:11 Comment(0)

L

0

you can use a webservice to detect mobile browsing like handsetdetection.com.

Livingston answered 16/11, 2008 at 23:57 Comment(1)

A call over the wire for each page request is not feasible for performance reasons – Christian 16/9, 2009 at 19:7

R

0

The fact is that just relying on the useragent is not good enough to detect mobile browsers.

Sure, years ago you could search it for certain strings and guess that it was a Nokia or something, but now there are so many phones out there, and so many that pretend to be things that they are not that something more sophisticated is needed.

I found a great site at link textwhich is based on the same solution that MTV use for all their mobile web sites. It is REALLY good as it has a device independent markup language but more importantly they offer a webservice call for isMobileDevice().

Just look in the manual then 'how it works'.

I've been using it for my customers sites and have yet to find a mobile browser that it doesn't detect accurately. Totally blinding!

Revanchism answered 15/9, 2009 at 16:17 Comment(2)

This is not reasonable for performance reasons - 'Using WAPL is extremely easy and only requires that you pass valid WAPL to Wapple's servers using the SOAP or REST webservices. The webservice server responds with the markup for you to output to the device. You have complete control over content, design and presentational elements.' – Christian 16/9, 2009 at 19:10

It is probably relevant to point out that the answerer is the CTO of the organisation "wapple" that publish wapl.info and other related service provided by wapple. gomonews.com/richwapple – Torras 15/1, 2010 at 14:59

S

0

Just ran across Device and feature detection on the mobile web with these contents:

Using device and feature detection to improve user experience on the mobile web
Introduction to device detection
Approaches to mobile site design
1. Do nothing
2. Providing a generic mobile site
3. Designing with mobile and adaptation in mind
Content adaptation and device grouping strategies
1. Device grouping
2. Content adaptation
Minimising the need for adaptation in the first place
Common approaches to device detection
1. Server side adaptation
2. Client-side adaptation
3. Server-side User Agent (UA) and header lookup
4. Server-side UA string combined with device database lookup
5. Server-side User Agent Profiles (UAProf) detection
6. Detection based on JavaScript technology
7. CSS media types
8. CSS media queries
Additional best practices
1. Redirection + manual link
2. Landing page + manual link
Downloadable sample page

Shirker answered 14/9, 2010 at 22:3 Comment(0)

P

0

you can use WURFL APIs to detect device type

http://wurfl.sourceforge.net/wurfl_schema.php

or Modernizer to detect browser abilities

Pentavalent answered 7/1, 2015 at 8:15 Comment(0)

Recommended topics

Hot tags