How to Detect and Redirect to Mobile Site using PHP and JavaScript

Hey! In this post, let's see how to detect mobile device and redirect to a mobile site using php (server-side) and javascript (client-side). Since Mobile usage has been exploded these days, every website should be mobile-friendly. Either your site must be responsive or have a separate mobile version.

A mobile website is just the light-weight version of a website specifically designed to view on smaller screens like smartphones and tablets. Usually mobile sites are hosted on sub domains like m.mydomain.com. Popular sites like Gmail, Facebook etc have separate mobile versions and if they are opened on mobile devices, will be redirected respectively.

How to Detect Mobile Device and Redirect to Mobile Website?

If you have a mobile site, you should redirect mobile visitors to your mobile website. But how do you know if the user accesses the site from a mobile or desktop browser? Well! You can know it through 'user-agent' string. The user-agent string contains information about the browser name, version, operating system etc. We can use these details to determine if the user access site from the mobile or desktop.

Read: Store and Retrieve Image from Database using PHP & MySQL

You can also check for other things like screen size and tell if it is a mobile device or not. You can do this on the client side by using plain old java script. Here is a small snippet to redirect mobile visitors to the mobile site using javascript.

Mobile Site Redirection on Client Side:

Place this script on the landing page of your site and when the visitor access it from the mobile phone, the js code will check the width of the screen and redirect it to the appropriate site.

<script type="text/javascript">
if (screen.width <= 768) {
    window.location = "http://m.yourdomain.com";
}
</script>

The downside of this method is it requires java script. But not all mobile browsers support it or user could disable javascript on the browser. So doing the checking process on the server side with script like php is a much better approach.

Let's see how to do it in php.

Read: How to Lazy Load Images in PHP and JavaScript

Detect and Redirect Mobile Visitors in PHP:

On the server side, you have to use the user agent string to detect the mobile environment and redirect users. Here's the php code to do it.

<?php
$usr_agent=$_SERVER["HTTP_USER_AGENT"];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$usr_agent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($usr_agent,0,4))){
    header("Location: http://m.yourdomain.com/");
}
?>

Just place this code at the top of the index/landing page of your website and it will detect and redirect mobile visitors to the appropriate mobile site.

Using Mobile Detect Library:

If you don't want to deal with the long list of user agents by yourself you can use the 'Mobile Detect' library. It is a light-weight php class for detecting mobile devices. It uses a combination of user agent string and http headers to detect the mobile environment.

First download mobile detect class and extract it to the website's root folder. Next you must include the 'Mobile_Detect.php' file in your index file and use the isMobile() function to detect mobile device.

<?php
include_once 'Mobile_Detect.php';
$device = new Mobile_Detect;
 
// check if it is a mobile
if($device->isMobile()){
    header("Location: http://m.yourdomain.com/");
}
?>

The code above checks if the visitor is from a mobile device and redirects to the mobile version of the website.

There is also a separate use case for detecting tablets specifically.

<?php
// check if it is a tablet
if($device->isTablet()){
    // code
}
?>

You can also detect the specific platform like Android or iOS like this.

<?php
include_once 'Mobile_Detect.php';
$mobileos = new Mobile_Detect;

// Check for specific platform
if($mobileos->isiOS()){
    // code
} else if($mobileos->isAndroidOS()){
    // code
} else if($mobileos->isWindowsPhoneOS()){
    // code
}
?>

Keep in mind that mobile detection is a growing platform, as new devices are coming to market every other day. So, make sure you constantly update the script to make it compatible with the latest devices.

Read: Currency Conversion using PHP and Google Finance API

That was all about detecting and redirecting visitors to mobile site using php. The user-agent method relies heavily on HTTP headers to extract device information. Sometimes the results can go wrong as it is easy for someone to tamper the headers. But so far it is better than the rest other methods available. I hope you like this tutorial. Please don't forget to share this post in social platforms.