Tutorial: Detecting mobile devices
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
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.
The remaining approaches rely on interpreting the user agent information. The table below shows the information returned from some common browsers on different devices:
|IE 9.0||Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)|
|Chrome||Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19|
|Firefox||Mozilla/5.0 (Windows NT 6.1; rv:12.0) Gecko/20100101 Firefox/12.0|
|HTC Desire||Mozilla/5.0 (Linux; U; Android 2.3.3; en-vn; HTC_Desire_A8183 V2.26.841.2 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1|
|iPhone||Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3|
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.
Use navigator.userAgent to obtain information that is sent back to the server about the web client.
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