If you are developing a website/webapp, you would no doubt want to make it accessible to those using mobile devices like smartphones, tablets etc. as well. Because of the limitation in the capabilities of these devices and the limited screen real estate, special consideration has to be taken to ensure that it works properly. Of course, the first thing you need to do is to detect the users who are using your webapp through a mobile device. In this tutorial, we are going to see how you can do that with the CodeIgniter PHP framework.

PHP has the function get_browser() which can give you details of the browser the user is using. However, if you are using CodeIgniter, it is much simpler. Let us use an example to demonstrate how to do this. I am assuming that the reader already knows some basics about CodeIgniter.

Suppose you have a controller with a function called test. Let us assume that you have two views - test_view and test_view_mobile. As the name suggest, you want to load test_view for those accessing the website with a desktop browser and test_view_mobile for those on a mobile. Well this is how you do it:

function test () {

     $this->load->library('user_agent');

     $data = array (

                    //some data

             );

     if (!$this->agent->is_mobile()) {

          $this->load->view('test_view',$data);

     }

     else {

         $this->load->view('test_view_mobile',$data);

     }

}

Looks simple, doesn't it. Well, let us break it down.

$this->load->library('user_agent');

This line loads the user_agent library so that we can use the functions that comes with it afterward in the function. After adding this library, the functions will be available with $this->agent.

If need to use library in many places, instead of loading it like this you can auto load it. To auto load a library, you need to add it to application/config/autoload.php. Open the file and search for the line

$autoload['libraries'] = array();

Add 'user_agent' in the array. After adding it, you will have

$autoload['libraries'] = array('user_agent);

Of course, you can add any other library that you want to auto load here.

if (!$this->agent->is_mobile()) {

     $this->load->view('test_view');

}

$this->agent->is_mobile() returns true if the user is on a mobile device that CodeIgniter recognizes. Otherwise it returns false. Similar to this, there is also $this->agent->is_browser() returns true if user is using a desktop browser that CodeIgniter recognizes. CodeIgniter recognizes almost all the commonly used browsers, so you can use $this->agent->is_browser() instead of !$this->agent->is_mobile() for most of the cases. However if you do so, if an unrecognized browser is encountered, test_view_mobile will be loaded. By using !$this->agent->is_mobile(), you are making sure that test_view is loaded in case a browser is not recognized.

$this->agent->is_mobile() and $this->agent->is_browser() can also be used to target specific device/browser. For example, $this->agent->is_browser('Firefox'), will return true if the user is using Firefox browser.

In the function test, if we want to load a different view, test_view_ipad, for the iPad, we have to modify the function like this.

function test () {

     $this->load->library('user_agent');

     $data = array (

                 //Some data

             );

     if (!$this->agent->is_mobile()) {

          $this->load->view('test_view',$data);

     }

     elseif ($this->agent->is_mobile('iPad')) {

          $this->load->view('test_view_ipad', $data);

     }

     else {

         $this->load->view('test_view_mobile', $data);

     }

}

You can view and edit all the user_agents that CodeIgniter recognizes in the file application/config/user_agents.php.

There are much more functions available with the user_agent library. You can check them out at http://codeigniter.com/user_guide/libraries/user_agent.html