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.
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
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.
I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.
Leave a Reply