Using Adaptive Mobile Device Detection For Joomla Website


The Adaptive mobile device detection script is already included with the Joomla framework in libraries/joomla/environment/browser.php so there is no need to add any special 'sniffer' script like WURFL, Mobile ESP etc. To use it simply requires inclusion of the isMobile function in your default template's index file. Or to make the job really simple, use the Simple Mobile Detection plugin developed by Conflate.nl.

The Template Setup For Joomla 2.5

You now need to create the mobile device template. You can simply make a duplicate of your existing desktop template and make some changes to the stylesheet (template.css) and the meta tags, or create new from scratch or you can download a basic set of files and build on it to your suit. You can make the template Responsive by using a Responsive Bootstrap library.

Note: If you use a framework such as Gantry, Warp or T3, all the tools needed for Responsive functions will already be included.

This guide assumes you have upgraded from Joomla 1.5 and have knowledge of the standard Joomla 2.5.x template structure.

Create the index.php

In the index.php file add the following to the php command line at the top to load the meta tags. This will tell the device to disable pinch zoom, and scale the page to the device's legible view format.

$document = JFactory::getDocument();
$document->setMetaData( 'HandheldFriendly', 'True' );
$document->setMetaData( 'viewport', 'width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; user-scalable=0;' );


Now develop the stylesheet.

Set some elements specific to mobile devices. Change the values to your suitable desire. webkit-text-size-adjust set to none will disable user text size adjusting. You can set a specific value or just remove it.

body {-webkit-text-size-adjust:none;font-size: medium;}
img {max-width:100%; height:auto;}


From there you will set all the element and class stylings as desired. Once all is completed, install the template.

Enable the Simple Mobile Detection plugin and set the Set Template parameter to Yes then choose the template you created from the drop down selection.

The plugin has options to allow Tablets to view the site in mobile or desktop mode. If you set all tablets to view as mobile, you can add a switch that the user can click to view as desktop.

<a href="/website-energy-guide?cmobile=0">View Desktop Mode</a>

That's it!

You may want to make some component overrides for additional display modifications.

Parameters for the Simple Mobile Detection plugin from Conflate.nl


Note: The settings to Enable Developer Mode are not part of the default plugin. It is a function we deemed neccessary and added to make the template viewable only to the IP address inserted so it can be properly constructed before public deployment. We have not been authorized to redistribute the plugin with those additions, however we have posted the steps at related forum

UPDATE: The developer has released a new version which supports a developer mode.



Copyright © 2018 CMSEnergizer.com. All Rights Reserved.
This website is powered by the Joomla!©™ 3 Website Framework | File download and article manager component by CMSE Custom Fields | Advanced Module Manager and Modules Anywhere by NoNumber Elements | Website hosting and development by WebsiteDons

CMSEnergizer.com is owned and operated by Emuzement Net Inc, Tampa, Florida USA