Practical .NET

Recognizing Mobile Browsers

ASP.NET 4 upgrades the support for detecting browser capabilities with profiles for the latest mobile browsers. The good news is that you can use that new information with older versions of ASP.NET.

• By Peter Vogel
• 11/14/2011

As more users are viewing your pages on mobile devices, you may want to alter your page's structure to provide a better experience. You can do this with CSS of course, but I suspect you'll also need to modify your page with code. At the very least, for browsers beginning with the letter "i" you might as swell skip downloading that Flash component. You might also want to insert the meta tag that (most) mobile browsers use to configure the viewport:

 <meta  name="viewport"  content="width=device-width">

Adding that tag would use code like this, for instance, in the Page's Load or PreRender events:

 Dim hma As New HtmlMeta

  hma.Name = "viewport"

  hma.Content = "width=device-width"

  Me.Header.Controls.Add(hma)

Another option you might want to consider: in your Page_PreInit event, switch your MasterPage (e.g. from a two column layout to a single column layout). However, you can only do that if you can determine what browser is requesting your page.

Checking Browser Capabilities

Every browser sends, with every request for a page, information about the make and model of the browser. ASP.NET uses that information to look up the browser's capabilities (the browser's profile) in an XML file installed with ASP.NET (if you're not happy with Microsoft's effectiveness in keeping the browser capabilities file up to date, you can switch to using 51Degrees.Mobi, an open source .NET component that reads the Wireless Universal Resource FiLe, (WURFL)).

The.NET team has updated the XML file with profiles for mobile browsers, including BlackBerry, iPhone, and iPod (the .NET team also removed profiles for mobile devices that aren't in circulation any more). You check the capabilities of the browser requesting the page by reading properties on the BrowserCapabilities object that you can retrieve from the Request class's Browser property. To see if your page is about to be displayed on an iPhone, you'd use this code:

 If  Request.Browser.MobileDeviceModel = "IPhone"  Then

  Me.FlashPanel.Visible = False

  End If

You can get the latest version of the browser capability files by downloading them from bit.ly/t0lyY7; then copy them to C:\Windows\Microsoft.NET\Framework\version\CONFIG\Browsers. The download includes a set of the files that works with ASP.NET 4 and older versions of ASP.NET. Also included is a set of configuration files usable with ASP.NET 3.5 applications that have been upgraded to ASP.NET 4 (upgraded applications can have compatibility issues with the native version 4 files). After downloading the file, you need to run the regbrowsers utility:

 aspnet_regbrowsers.exe  –I

The utility gathers all the files into a single DLL which it installs in the GAC (run on a server, it also cycles all of your Web sites and IIS).

Testing

The question is how to test whether your page is doing the right thing when faced with a "different" browser. One choice is to use an emulator; but in .NET Framework 4, you can incorporate your own browser capability provider. In this class, you can return a browser capability list that represents the browser you want to test with.

The class must inherit from the HttpCapabilitiesProvider and implement the GetBrowserCapabilities method that returns an HttpBrowserCapabilities object. That method loads a Hashtable with your custom values into the Capabilities property of the instance of the HttpBrowserCapabilities object you return:

Public Class PHVBrowserCapabilities

  Inherits Web.Configuration.HttpCapabilitiesProvider

Public Overrides Function  GetBrowserCapabilities(

  request As  System.Web.HttpRequest) As System.Web.HttpBrowserCapabilities

  Dim hbc As New HttpBrowserCapabilities

  hbc.Capabilities = New Hashtable(180, StringComparer.OrdinalIgnoreCase)
   hbc.Capabilities.Add("MobileDeviceModel",  "IPhone")

  hbc.Capabilities.Add("MobileDeviceManufacturer",  "Apple")

  hbc.Capabilities.Add("IsMobileDevice",  "true")

  hbc.Capabilities.Add("CanInitiateVoiceCall",  "true")

  hbc.Capabilities.Add("MobileDeviceModel",  "IPhone")

  hbc.Capabilities.Add("MobileDeviceManufacturer",  "Apple")

  hbc.Capabilities.Add("IsMobileDevice",  "true")

  hbc.Capabilities.Add("CanInitiateVoiceCall",  "true")

  hbc.Capabilities.Add("Cookies",  "true")

  hbc.Capabilities.Add("W3CDomVersion",  "1.0")

  hbc.Capabilities.Add("EcmaScriptVersion",  "3.0")

  hbc.Capabilities.Add("Tables",  "true")

  hbc.Capabilities.Add("JScriptVersion",  "6.0")
   Return hbc
End Function

  End Class

The entries from Cookies on down are required to support a check that ASP.NET performs—the ones prior to that are up to you (I've used values from Internet Explorer 9). When adding entries, you want to match the names of properties on the HttpBrowserCapabilities object.

To use your new class, add this tag inside the system.web element, referencing your new class:

 <browserCaps provider="PHVBrowserCapabilities, MySite.PHVBrowserCapabilities" />

However, getting this to work in an ASP.NET Web Site (rather than a Web Application) is problematic because a Web Site doesn't have a namespace. Fortunately, you can accomplish the same goal by adding this code to the Application Start event in your Global.asax file:

 Web.Configuration.HttpCapabilitiesBase.

  BrowserCapabilitiesProvider  = New PHVBrowser

While I've focused on code here, it would be foolish to ignore CSS. But for the code support you need, these tools should let you decide when to make your changes and test them.