I'm just starting to create my first mobile version of a desktop website that was written in WebForms.
My current question has to do with mobile device/browser detection.
What I'm trying to determine is a) If your device is mobile b) What OS (Android/IOS/etc) in case I need to handle anything differently based on the OS and c) What screen size (for loading different stylesheets)
Detecting the type of browser is simplest by looking at the useragent string. Key words in that string will help detect the browser. UserAgentString.com maintains a thorough list of useragent strings, but the main thing you need to look for are only a few keywords.
For example, the word "blackberry" only ever shows up when browsing from a Blackberry device. Similar with iPad and iPhone. Android devices all show "android" in the useragent string, but they distinguish between tablets and phones by inclusion of the keyword "mobile" for phones.
Here's how we detect Desktops, Phones, and Tablets in our mobile application:
public enum DeviceType
{
Desktop,
Tablet,
Phone
}
public static DeviceType UserAgentToDeviceType(string userAgent)
{
if (userAgent.ToLowerInvariant().Contains("blackberry"))
return DeviceType.Phone;
if (userAgent.ToLowerInvariant().Contains("iphone"))
return DeviceType.Phone;
if (userAgent.ToLowerInvariant().Contains("ipad"))
return DeviceType.Tablet;
if (userAgent.ToLowerInvariant().Contains("android"))
{
if (userAgent.ToLowerInvariant().Contains("mobile"))
return DeviceType.Phone;
else
return DeviceType.Tablet;
}
return DeviceType.Desktop;
}
If you are using something like jQuery Mobile, the site will be customized for mobile appearance regardless of device type, and it will handle differences between the JavaScript engine on different devices.
I do not necessarily think what I am proposing is the best solution in many cases, however it may prove an alternative insight into your problem area.
Instead of a detecting a mobile browser per se, which has some similarities / disadvantages to browser sniffing.
Instead take the approach of responsive design. I won't go into detail of responsive design here, as it's taking us off track. However what it could provide you with is an approach which instead of customising the entire experience based upon what browser is detected, it's a subtler method of customising the experience based upon screen resolutions, css capabilities, JavaScript being enabled etc etc.
Responsive design isn't a technology per-say, but a set of techniques that enable the experience to be progressively enhanced depending on the browser (mobile browser) being used.
What a responsive technique doesn't really allow for (or at least it is compromised) is very dramatic differences between e.g. mobile version / desktop version. As each would typically pollute the separate experience e.g. html could be hidden on a mobile version, but might be still downloaded in the background... but these techniques are developing e.g. JavaScript can be used to download a low resolution image on a mobile browser and a high resolution on a wide screen monitor.
But you could always put a link to a completely separate mobile version / desktop version of site to allow the user to decide as a fall-back.
WURFL is a great resource for this. You can configure what values you need (no need to take all of its arguments). I think if you want to create your own solution-
1) You can take WURFL XML 2) Shortlist arguments as per your needs 3) Use XML Reader to read its xml and put values in your database.
This way you can have your own solution. (aLthough one issue is that new devices that register later on WURFL will not be updated automatically, so you have to later on update it yourself)
you can get the `.NET handset detection API kit` by visiting following link:
http://code.google.com/p/handset-detection-asp-net-api-kit/
– Nitin Sawant Apr 17 '12 at 10:03