Today, nearly everyone has a smartphone, tablet or other mobile computing device. Unfortunately websites designed for large screen browsing do not display very well on these devices because of screen size constraints and other interface limitations. In addition, the Flash player is not universally implemented in all mobile devices (eg iPhones and iPads). This article discusses various techniques that can be used to detect a mobile device and then automatically re-direct the user to a mobile device specific landing page.

The techniques include:

• Manual Selection
• User Agent information via Java and
• User Agent information via Server Detection

Manual Selection

This is the easiest method to implement. Simply add a link at the top of your website that points to the Mobile Landing Page. The link should exist within the html (not Flash) section of your website.

User Agent

The remaining approaches rely on interpreting the user agent information. The table below shows the information returned from some common browsers on different devices:

If the words Mobile, iPhone or iPad appear in the returned string, there is high probability that the device is a mobile device. Should a specific mobile device not be identified, modify the sample scripts below to search for specific string that may appear in specific mobile devices that you wish to target.

Java

Use navigator.userAgent to obtain information that is sent back to the server about the web client.

One possible issue with this approach is that the mobile device does not support Javascript. For this reason, the Server Detection methods are generally considered more reliable.

<script type="text/javascript">
var ua=navigator.userAgent;
if (ua.indexOf("Mobile")!=-1) window.location = "http://www.mysite.com/mobile.html"
if (ua.indexOf("iPad")!=-1) window.location = "http://www.mysite.com/mobile.html"
if (ua.indexOf("iPhone")!=-1) window.location = "http://www.mysite.com/mobile.html"
</script>

Server Detection (php)

php is the server side scripting language generally available on linux servers.

<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/Mobile|iPhone|iPad/',$ua)) header("http://www.mysite.com/mobile.html");
?>

Server Detection (asp)

asp is available on Microsoft servers.

<%
dim u
set ua=Request.ServerVariables("HTTP_USER_AGENT")
set b = new RegExp
b.Pattern="Mobile|iPad|iPhone"
if b.test(ua) then response.redirect("http://www.mysite.com/mobile.html") end if
%>

Mobile Landing Page

For maximum compatibility, the mobile landing page should have the following attributes:

• Authored in html
• Smaller than typical desktop width, eg 250 pixels.
• Logo image typically 250×85
• Essential content only such as: Company / item description, Company address / phone number and Link to desktop web page

Tags: iPad, iPhone, Mobile

This entry was posted on Thursday, June 14th, 2012 at 7:29 am and is filed under Advanced, Max4, Swishmax 4, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.