This extension lets you show or hide specific articles, content elements and frontend modules on mobile or desktop devices. Image fields are extended – you can now add an different image for the mobile devices.
It works out of the box by recognizing the visitor user agent and displaying the appropriate content.
For use with CDN that caches the pages you may want to enable a separate mobile domain though (see explanation below).
The extension is compatible with Contao 3 and 4.
To toggle the content you can either edit the element settings or simply use the icons available in the list view:
To use a different image for mobile devices check Different mobile image on any elment with an image.
In the website root settings you can enable the special domain for the mobile devices.
If mobile domain is enabled mobile and desktop layout will be distinguished by domain only.
To allow easy switch between the desktop and mobile domains you can add the mobile/desktop switch front end module that displays a short information about the parallel domain and allows the visitors to switch to the correct version of the website for their device.
When the auto-redirect is enabled, right before the visitor is redirected to the correct version of the page
the script adds the mobile-content-redirecting CSS class to the <body> element.
Note: when this feature is enabled, the toggle links get the extra hash parameter to the URL. When the user visits a page with that parameter (e.g. by clicking the link) the cookie will be set that prevents from yet another redirect back. This allows e.g. the mobile visitors to be redirected to the mobile version of the website on first page view but they can still view the desktop version by explicitly clicking the link.
If the Contao default mobile/desktop detection by User Agent does not fit your needs, you can alternatively activate detection by viewport width.
As this detection is done by JavaScript, the mobile/desktop switch front end module needs to be added to the layout.
Adds a link to toggle between desktop and mobile view. This link carries the classes mobile_toggle and desktop
or 'mobile' corresponding to the destination of the link (not the type of page it is on!).
Is replaced by the URL to the currently inactive view mode.
Is replaced by the content of the language variable $GLOBALS['TL_LANG']['MSC']['toggleDesktop'][0] or
$GLOBALS['TL_LANG']['MSC']['toggleMobile'][0]. This is normally the text of the standard toggle link
created by mobile::toggle.
Is replaced by the content of the language variable $GLOBALS['TL_LANG']['MSC']['toggleDesktop'][1] or
$GLOBALS['TL_LANG']['MSC']['toggleMobile'][1]. This is normally the title of the standard toggle link
created by mobile::toggle.
This insert tags shows only one of the two alternatives alternative_desktop or alternative_mobile depending on
which type of view is currently active. Note: there is a single semicolon between the two last chunks in the insert tag.
The content between the start and and tag is skipped if it appears on a desktop page.
The content between the start and and tag is skipped if it appears on a mobile page.
To check if the current page is mobile:
$GLOBALS['objPage']->isMobileExample for the templates:
<?php if ($GLOBALS['objPage']->isMobile): ?>
mobile content
<?php else: ?>
desktop content
<?php endif; ?>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent