php developer blog

Detecting mobile devices

by Dominik Jungowski

13. Januar 2009 comments feed

Nowadays it is getting more important to having his website also readable for mobile clients. While there is the possibility of using WURFL for detection, WURFL seems to be a bit overhead when you only want to display simple contents (mostly text). I agree, that you should use WURFL, or similar, if you're planning on providing media contents, such as videos. Still, you have to keep at the back of your mind, that it is very unlikely that you will have users using a 3 year old Siemens Mobile Phone browsing your website. The target consumers are definately iPhone users or any other user with a newer mobile phone.

When browsing to your website, people want to type the known adress (e.g. www.phpdevblog.net) instead of a new adress (e.g. www.phpdevblog.net/mobile). So obviously the best way would be to detect users using mobile devices and redirecting them to the mobile adress or using another Front Controller or… (the decision is up to you). An easy way is to check the users Useragent in order to detect mobile devices. I will show you two examples, one covering server-side detection (using php - obviously) and the other covering client-side detection using JavaScript. Both ways should cover most mobile devices, if you have any additions please let me know! Thank you

Edit on Februar 3rd, 2009: I added the needed string for Android phones to the arrays

Server-Side detection:

class Client
{
    /**
     * Available Mobile Clients
     *
     * @var array
     */
    private $_mobileClients = array(
        "midp",
        "240x320",
        "blackberry",
        "netfront",
        "nokia",
        "panasonic",
        "portalmmm",
        "sharp",
        "sie-",
        "sonyericsson",
        "symbian",
        "windows ce",
        "benq",
        "mda",
        "mot-",
        "opera mini",
        "philips",
        "pocket pc",
        "sagem",
        "samsung",
        "sda",
        "sgh-",
        "vodafone",
        "xda",
        "iphone",
        "android"
    );

    /**
     * Check if client is a mobile client
     *
     * @param string $userAgent
     * @return boolean
     */
    public function isMobileClient($userAgent)
    {
        $userAgent = strtolower($userAgent);
        foreach($this->_mobileClients as $mobileClient) {
            if (strstr($userAgent, $mobileClient)) {
                return true;
            }
        }
        return false;
    }

}

$client = new Client();
$client->isMobileClient($_SERVER['HTTP_USER_AGENT']);

Client-Side detection:

function Client() {
}

Client.prototype.mobileClients = [
	"midp",
	"240x320",
	"blackberry",
	"netfront",
	"nokia",
	"panasonic",
	"portalmmm",
	"sharp",
	"sie-",
	"sonyericsson",
	"symbian",
	"windows ce",
	"benq",
	"mda",
	"mot-",
	"opera mini",
	"philips",
	"pocket pc",
	"sagem",
	"samsung",
	"sda",
	"sgh-",
	"vodafone",
	"xda",
	"iphone",
	"android"
];

Client.prototype.isMobileClient = function(userAgent)
{
	userAgent=userAgent.toLowerCase();
	for (var i in this.mobileClients) {
		if (userAgent.indexOf(this.mobileClients[i]) != -1) {
			return true;
		}
	}
    return false;
}

var client = new Client();
client.isMobileClient(navigator.userAgent);