Easily Detect Mobile Device vs Desktop – A Developers Story

A client that I have been working for in the past week had a website with a loading graphic that was displayed until the page was fully loaded.

He wanted to change this and show the loading graphic only on slow connections. If that was too complicated to implement, his fall back option was to show the loading graphic only on mobile networks.

Initial Analysis

Finding the speed of your connection involves downloading a data packet and then calculating the time required to download that. As far as I know, this is how speed test websites and video streaming sites like YouTube and Netflix estimates the users connection speed.

Mobile Vs Desktop

Since the client website didn’t have any elements that hugely dependent on the network speed of the user and since it was out of scope for the said project, that was not feasible. In effect, doing it would only make the site slower.

Onto the fallback option.

Show the loading graphic only on mobile networks. So basically you have to detect between a WiFi user and a mobile 4G/3G user.

In general you identify the mobile network by the IP. There are both free and premium databases that provide this information. For example, here is a link to a website that shows the IP ranges of Airtel, a mobile service provider in India and other countries.

So you could get the IP of the user, compare it against a database like that and then decide if the user is on WiFi or a data connection and proceed from there.

Again out of scope of the project.

While I was getting ready to ditch this completely, the client suggested detection based on user agent.

User agent info is public domain. Its basically a list of info passed by your browser to the server so that the server can send appropriate content. This tool here will show you what info your current browser is sending.

You couldn’t tell if the user was on a WiFi connection or a data connection, but you could tell if the user was using a mobile phone or a desktop. That covered a lot of the use cases for the client and we went ahead with that.

Detecting Mobile Device Vs Desktop Using User Agent

Iphone With Bright Colors

In PHP, you can easily get the user agent using:

$_SERVER['HTTP_USER_AGENT']

Here is a good example of using this to find all the information from the user. I didn’t need to process all the info, so I adapted a piece from the same.

<?php
$u_agent = $_SERVER['HTTP_USER_AGENT']; // Get the user agent.
// Check for Mac and Windows
if (preg_match('/macintosh|mac os x/i', $u_agent) || preg_match('/windows|win32/i', $u_agent)) {
// Do stuff to be displayed on Windows and Mac desktops.
}
else {
// Do stuff to be displayed on everything else. This includes mobile phones and such.
}
?>

Known Issues

First off this is not a fail safe method and cannot be used for mission critical checks. User agent can be easily faked.

Also the above piece ignores Linux desktops since Android phones also have a user agent with the OS as Linux. Of course you can harden it by checking for Android in another condition check.

But for our use case, this was good enough.

Want Tighter Detection?

If you are not satisfied with the simple detection as described here or if you are coding is something other than PHP, you have to check out this website. They have code snippets for quite a lot of coding languages.

Here is the PHP script using their content to detect mobile browsers.

Another options is this one. It’s a PHP class that will help you detect mobile devices.

Alright then. Code away.

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

Leave a Reply

Your email address will not be published. Required fields are marked *

*