dotMobimobiForgemobiReadyDeviceAtlasgoMobi
background image

Mobile/Desktop Switching Code

goMobi allows you to create a mobile site for your business. In order to make the best use of this mobile-friendly site we recommend that you add functionality to your existing desktop web site to automatically redirect mobile devices to the mobile site. This ensures the mobile users get the best experience even if they type in the address of the existing desktop site.

Switching Diagram

PHP, JSP & ASP.net

The code samples on this page show how you can achieve this effect in PHP, JSP and ASP.net. These code samples are designed to be integrated into the system that implements your site. The code samples use a web service version of dotMobi's DeviceAtlas product to detect the nature of the browser making the request. In order to do this, a HTTP call is made to the DeviceAtlas web service similar to the following:

http://detect.deviceatlas.com/query?User-Agent=Mozilla%2F5.0+%28SymbianOS%2F9.2%3B+Series60

In response the server sends a very small JSON-encoded object back containing some details about the device in question:

{"displayWidth": 240, "mobileDevice": true, "displayHeight": 320}

This core part of the logic is very simple. Essentially it boils down to something like this:

define('DA_URI', 'http://detect.deviceatlas.com/query');
$da_json = @file_get_contents(DA_URI . "?User-Agent=" . urlencode($_SERVER["HTTP_USER_AGENT"]));
$da_results = (array)json_decode($da_json, true);
if ($da_results['mobileDevice']) {
    header('Location: http://mobile.mobi/');
}

Most of the additional code in the included samples is to implement cookies and a simple cache on the web server. These optimizations ensure that subsequent requests for the same device (browser or phone) do not require an additional lookup to the web service and are instead retrieved from a cookie, or a file in the system's temporary directory. dotMobi highly recommends leaving this cookie and caching code intact, since it results in much higher performance and lower machine load. The first request from a new device make take as much as a second or two to query DeviceAtlas but subsequent requests should be no more than a few milliseconds.

One additional check is performed to prevent unintentional redirect loops: in the case where a user who was redirected to the mobile site specifically asks to be served the desktop site it is important to honour this choice. In this case the redirect functionality is disabled via a redirect=false parameter appended to the desktop site URL. All versions of the code samples below check for this parameter and disable their redirect functionality if detected.

For the full sample code listings, with local caching and cookie functionality, please use the links below:

JavaScript

If you do not have access to your server there is one further option that can be used. This option uses JavaScript and hence can be pasted into the <head> section of your pages without having to alter the underlying server code.

Note: this option is not recommended for a few reasons:

  1. It is not guaranteed to work on all devices, since many mobile phones do not execute JavaScript.
  2. Depending on the device, the entire HTML and linked resources in the page may be downloaded before the redirect happens, removing much of the benefit of switching to a mobile-friendly page.
  3. By necessity, the JavaScript must be generated each time, per device. This means that there will always be a delay while the device fetches the JavaScript file from the DeviceAtlas servers.

To use this approach, add the following line to the <head> section of the relevant pages of your site.

<script type="text/javascript"
src="http://detect.deviceatlas.com/redirect.js?d=http://desktop.com&m=http://mobile.mobi">
</script>

where http://desktop.com is the URL of your desktop site and http://mobile.mobi is the URL of your mobile site. The resulting JavaScript will then redirect mobile devices to the mobile site but leave desktop browsers at the current URL. This solution has been tested on the following browsers and device ranges:

  • Opera Mini 4 and later
  • Nokia Series 40 Series 3 and later
  • Nokia Series 60 3rd Edition and later
  • iPhone (all types)
  • Android 2.1 and later

This solution has not been tested on the following classes of devices:

  • OpenWave browsers
  • Obigo browsers