Detecting mobile or tablet device

Question

The aim for me is to have a mobile website (for mobiles and tablets) and a responsive desktop website, built on Wordpress. I want the easiest way to implement fool proof device detection.

The mobile website is going to have a lot of features that are only really going to benefit touch devices and will be custom designed for mobiles and tablets. The desktop site will be completely different (with same pages but with additional content) and will be fully responsive just in case any devices slip through the detection.

I have this one liner that will detect touch devices and redirect to another page but it seems too simple to be a fool proof method of device detection. How fool proof is this? Will it work for Windows and Android devices as well as iOS?

This is my first time doing such a site and not sure how effective this is going to be:

<!-- Redirect to the mobile index page if we're on a touch device -->
<script>if( 'ontouchstart' in window ) window.location = 'mobile.html';</script>

Answer 1

You can use the mdetect (Mobile detect) library to do this for you. It is written in several languages, and will detect Windows, Android, iOS etc. Make sure you read the documentation.

• PHP Version
• JavaScript Version

Take note that the JavaScript version contains this warning:

// WARNING: 
//   These JavaScript-based device detection features may ONLY work 
//   for the newest generation of smartphones, such as the iPhone, 
//   Android and Palm WebOS devices.
//   These device detection features may NOT work for older smartphones 
//   which had poor support for JavaScript, including 
//   older BlackBerry, PalmOS, and Windows Mobile devices. 
//   Additionally, because JavaScript support is extremely poor among 
//   'feature phones', these features may not work at all on such devices.
//   For better results, consider using a server-based version of this code, 
//   such as Java, APS.NET, PHP, or Ruby.

Answer 2

For Mobile Detection on PHP I have always used the $_SERVER['HTTP_USER_AGENT'] variable. I use the function below to have very granular control over who gets delivered the mobile site (specific devices I want to support). Simply add useragents to the array (such as 'Ipad') to add additional devices.

function detectmobile(){
    $agent = $_SERVER['HTTP_USER_AGENT'];
    $useragents = array (
        "iPhone",
        "iPod",
        "Android",
        "blackberry9500",
        "blackberry9530",
        "blackberry9520",
        "blackberry9550",
        "blackberry9800",
        "webOS"
        );
        $result = false;
    foreach ( $useragents as $useragent ) {
    if (preg_match("/".$useragent."/i",$agent)){
            $result = true;
        }
    }
return $result;
}
if (detectmobile() == true) { wp_redirect('http://pageyouwwanttoredirectto'); }

Usage: you can the above code to your wordpress theme's functions.php file.

Answer 3

That code will work just fine for almost any device that is touch enabled.