Detecting web visitors that use mobile phones

With all the thrusts nowadays towards using mobile devices to surf the Net, it would be great if your Wordpress blog is mobile device friendly. The concept is actually simple and you can incorporate a mobile friendly version of your blog by understanding some simple things.

The main thing that you need to know is that when visitors to your Wordpress blog (actually any web site but let’s use Wordpress for this example) browses your site, you can identify the type of computer or mobile device that they are using. Once you have identified the device, it’s easy to create a separate CSS stylesheet for your mobile visitor.

The web browsers (of computers and mobile devices) can be identified by what is called a “user agent string”. The string is passed on to your web site when a visitor arrives at your site. The “user agent string” can be accessed programmatically in, for example, PHP (the scripting language used by Wordpress) thru the global variable $_SERVER["HTTP_USER_AGENT"].

A sample source code of a PHP function to detect a mobile browser appears below.

function is_mobile() {
    $browsertypes = array(
        '240x320',
        'MIDP-2.0',
        'MOT-V',
        'NetFront',
		'Nokia',
		'Opera Mini',
		'Palm',
		'SonyEricsson',
		'Symbian OS',
		'SymbianOS',
		'Windows CE'
		);

    foreach ($browsertypes as $browsertype) {
    	if (strstr($_SERVER["HTTP_USER_AGENT"], $browsertype)) {
    	    return true;
    	}
    }
    return false;
}

You can add the user agent strings for other mobile devices into the $browsertypes array. For instance since I am using a Nokia mobile phone whose web browser is identified by the “SymbianOS” user agent string, I have added it into the list to allow me to browse Code Stuff on my mobile phone.

I created two stylesheets for Code Stuff. One is the default stylesheet for normal visitors and another one for visitors with mobile devices like cellphones.

I can then use the PHP function above called is_mobile() to decide whether my site should load the default stylesheet or the mobile stylesheet. A sample source code of how to do it in PHP that works with Wordpress themes is shown below.

if (is_mobile()) {
    // include the mobile stylesheet named mobile.css
} else {
    // include the default stylesheet named style.css
}

The is_mobile() PHP function can also be used in other parts of your Wordpress theme to create a more mobile friendly blog. Another example would be to use a mobile version (smaller) logo of your web site.

I hope that helps. I’ve incorporated a mobile stylesheet into Code Stuff so that I would be able to read the articles I’ve posted using my mobile phone. I use one of those few Nokia mobile phones that have a 352 x 416 pixel resolution. It’s great because for a mobile phone, I have a web browser that have a higher resolution than most of the 240 x 320 standard screens.

So what I have basically did for Code Stuff is to create a mobile stylesheet that allows me to view Code Stuff on my mobile phone without having to scroll left or scroll right. This way when I’ve put most of what I need into Code Stuff, I can always browse the web site on my mobile phone.

A screen shot of Code Stuff using the Mozilla Firefox web browser:

A screen shot of Code Stuff using Nokia’s web browser: