JoomlaPure MobileDetect Settings

JoomlaPure goes beyond other frameworks methods of responsive content by incorporating the PHP MobileDetect class.

MobileDetect is a server-side device detection library which we can use to send the correct content to the correct devices without the need to hide specific things from different displays.

For example, Bootstrap includes classes such as .visible-phone .visible-desktop .hide-phone and .hide-tablet which use the browsers width and media queries to determine whether elements should be shown or not by adding or removing the display:none/block value.

The problem with this approach is that all devices still need to download the full content to render the page even if that content will not be used.

Module Class Suffixes to Remove Content from Specific Devices

The mobile detect library, combined with JoomlaPure's module chrome allow the use of some new module class suffixes:

  • mobile-remove
  • tablet-remove
  • desktop-remove
  • bot-remove

Adding these classes to your modules doesn't just hide the content from view, it stops the content being sent to the device in the first place, cutting down the size of the page which, in turn, results in a faster loading page.

Note - There is one drawback when using the classes in this way in that it doesn't play well with the Joomla cache. When cache is enabled and the module is set to use global options it will be stuck as the device which first views the page after cache is enabled and be stuck that way until it is time to refresh. Luckily all is not lost and disabling the cache in the modules advance options area will make it play nicely again. 

Other Device Specific Options

Device specific stylesheets

Enabling the mobile or tablet css files will stop the main css file being sent to respective devices with mobile.css or tablet.css being sent instead allowing for a much reduced filesize (less and sass is included for these files).

Removing print styles

Enabling this option will remove the print stylesheet from mobile and tablet devices.

Remove comments from mobile

Enabling this option will disable the third party comments functionality from mobile devices.

Experimental options

These options are not intended for use on production sites and are more of a personal curiosity of mine

Enabling these options will remove JavaScript and css files for search engine bots leaving them with pure content and a faster page load time.

Use at your own risk!