In: Joomla Extensions

Detect if your site is viewed on a mobile device with Joomla iPad Detection and Android Detection

icon-128-mobile Joomla: Compatible Joomla 3.0 Download the Simple Mobile Detection plugin Go to support forum
Type: Plugin icon
Version: 2.0.4
License: GNU/GPL 2.0
Please leave a review if you like this extension:
http://extensions.joomla.org/extensions/mobile/mobile-display/21806

Description

The Simple Mobile Detection plugin does a simple check to see if clients are on a mobile device. If so, this is stored in the User State so that you can check anywhere in your code if you're dealing with a mobile client.

The Mobile Detection plugin uses the default Joomla Browser class and extends it with detection for iPad, iPhone, iPod and Android devices. The Joomla iPad detection and iPhone or iPod detection will store on what device the client is currently viewing the website. The Joomla Android detection is a little more advanced and also attempts to collect more information about the device, like the model and the Android build.

New features in 2.0

The main added feature in 2.0 is the Mobile Content Switch. With this feature you're able to set different content in the article for mobile devices. This is done be setting the {IfMobile}...{EndIfMobile} tags. The content between these tags is displayed on mobile devices. You can also add an {ElseMobile} tag if you have a specific text for either mobile and non mobile devices. It is still beta so if you should find any bugs or have some improvements, please share it at our forum
Here is a very simple setup on how to use the switch:

{IfMobile}
 
This is mobile content, only displayed on mobile devices
 
{ElseMobile}
 
This is non mobile content, and displayed on i.e. desktops
 
{EndIfMobile}
 

You can also use it inline, like

You are on a {IfMobile}mobile{ElseMobile}non mobile{EndIfMobile} device
 

Note: nested switches are not supported yet. You must close the switch with {EndIfMobile} before opening a second switch

There is also support to make the switch more specific be setting an attribute in the first part of the tag. The supported attributes are isdevice, iphone, ipad, ipod or android. At the moment only one attribute is supported!

Here are some examples:

{IfMobile ipad}
 
This is mobile content, only displayed on ipad devices
 
{EndIfMobile}
 
{IfMobile android}
 
This is mobile content, only displayed on android devices
 
{EndIfMobile}
 
{IfMobile isdevice}
 
This is mobile content, and is displayed on mobile devices regardless of the state of the plugin
 
{EndIfMobile}
 

The new attribute isdevice is used when you always want to display something on mobile device. As you know, with the ?cmobile=0 switch you can turn off the plugin, but that would also mean that the mobile content is no longer displayed. When setting {IfMobile isdevice}, this will not happen!

Add the viewport meta-tag (new feature!)

For mobile devices it's often recommended to set the viewport meta-tag: <meta name="viewport" content="width=device-width, initial-scale=1" />. With the Simple Mobile plugin you can add this tag for mobile devices very easily in the settings. You can even change the content for this tag, but by default it has the recommended value of width=device-width, initial-scale=1.

Development mode

You can set the plugin in a development mode. This will enable you to test specific settings on a regular device, as if it were mobile. You can either just enable the development mode for everybody and all devices, be setting it to Always on, or on a per IP basis. On each line you enter an IP for which the plugin will be in development mode.

Per device options
With the per device options you're able to set specific options for a device separately. Currently the plugin supports these options for iPad, iPhone and iPod. This enables you to set Basic options for the plugin and set different, or disable, options for i.e. an iPad.
To set per device options, go to the plugin and open, in this case, iPad Options and set the switch 'Use specific options' to Yes. If you leave the switch to No, the Basic Options will be used. If for instance the Basic Options have been configured to use a different template, but you don't want this for the iPad, set the 'Set template' swich to No. Now the plugin will change the template for mobile device, except for the iPad!
Note, if you use the specific options for a device, none of the basic options are used!

This example demonstrates how to do the check, and get the device parameters.

//Get the switch from the User State if this is a mobile device
$app = JFactory::getApplication();
$mobile = $app->getUserState('cmobile.ismobile', false);
$isDevice = $app->getUserState('cmobile.isdevice', false);
if($mobile){
  //It's a mobile device, get the paramaters
  $device = new JRegistry($app->getUserState('cmobile.device'));
  $deviceName = $device->get('name');
  if($deviceName == 'ipad'){
    //This is an iPad
  }
  if($deviceName == 'iphone'){
    //This is an iPhone
  }
  if($deviceName == 'android'){
    //This is an Android device
    //Get the model, if the plugin got it
    $model = $device->get('model', false);
    //Get the build, if the plugin got it
    $build = $device->get('build', false);
  }
}
 

Version log:

13-05-2014: 2.0.4: Fixed a bug for inline Content Switch statements. Added a feature to redirect to mobile URL and keep the page that was requested. Added the feature to set the viewport metatag
11-02-2014: 2.0.3: New feature for checking if the device is mobile, regards of the cmobile=0 setting.
20-11-2013: 2.0: Added the content switch for articles, added development mode, added a per device option for android devices
20-06-2013: 1.5: Added feature to select per device what config to use. For now supporting iPad, iPhone, iPod
31-10-2012: 1.1: Support Joomla 3.x
01-03-2012: Release