Extension:MobileDetect

MediaWiki extensions manual

File:OOjs UI icon advanced-invert.svg MobileDetect Release status: stable
Implementation	Tag
Description	Detects mobile devices and allows to control the content visible with "nomobile" and "mobileonly" tags, parser functions and CSS classes.
Author(s)	Matthew Tran (Archivolttalk)
Maintainer(s)	Sophivorus
Latest version	2.4 (2022-09-26)
MediaWiki	1.35+
Composer	mediawiki/mobile-detect
License	GNU General Public License 3.0
Download	<translate> Download extension</translate> <translate> Git</translate> [?]: <translate> Download Git master</translate> <translate> browse repository</translate> (GitHub) <translate> commit history</translate> <translate> repository contributors (GitHub)</translate> <translate> code review</translate>
Tags ‎<nomobile>, ‎<mobileonly>, #nomobile, #mobileonly
Hooks used ParserFirstCallInit BeforePageDisplay
Quarterly downloads
Public wikis using
Translate the MobileDetect extension if it is available at translatewiki.net
Issues	Open tasks · Report a bug

The MobileDetect extension detects mobile devices using PHP's HTTP_USER_AGENT. Due to the nature of the extension, it should be very compatible with both new and old versions of MediaWiki.

The extension introduces a function called wfMobileDetect(), which returns true when a mobile device is detected, and false otherwise. It also introduces "nomobile" and "mobileonly" tags, parser functions and CSS classes which allow users to control which content is displayed only in mobile browsers, and which content is displayed only in desktop browsers.

Installation

• <translate> [[<tvar name=2>Special:ExtensionDistributor/MobileDetect</tvar>|Download]] and move the extracted <tvar name=name>MobileDetect</tvar> folder to your <tvar name=ext>extensions/</tvar> directory.</translate>
  <translate> Developers and code contributors should install the extension [[<tvar name=git>Special:MyLanguage/Download from Git</tvar>|from Git]] instead, using:</translate>cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/MobileDetect
• <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate>

  wfLoadExtension( 'MobileDetect' );
  

• File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

<translate> To users running MediaWiki <tvar name=1>1.38</tvar> or earlier: </translate>

<translate> The instructions above describe the new way of installing this extension using <tvar name=LoadExtension>wfLoadExtension()</tvar>.</translate> <translate> If you need to install this extension on these earlier versions (MediaWiki <tvar name=1>1.38</tvar> and earlier), instead of <tvar name=code>wfLoadExtension( 'MobileDetect' );</tvar>, you need to use:</translate>

require_once "$IP/extensions/MobileDetect/MobileDetect.php";

Usage

wfMobileDetect() function

If you would like to set a default theme depending on a visitor's browser, you can add this to your LocalSettings.php:

wfLoadExtension( 'MobileDetect' );
$mobile = wfMobileDetect();
if ( $mobile ) {
    $wgDefaultSkin = "chick"; # If mobile
} else {
    $wgDefaultSkin = "vector"; # If not mobile
}

With this code, if the visitor's browser shows a user agent from a mobile browser, the default theme will be "chick" instead of "vector". If instead the browser shows a user agent from a desktop/full browser, the default theme will be "vector" instead of "chick".

If you would like a certain extension to be excluded from loading on mobile browsers, you can add this to your LocalSettings.php:

wfLoadExtension( 'MobileDetect' );
$mobile = wfMobileDetect();
if ( ! $mobile ) {
    wfLoadExtension( 'ConfirmEdit' ); # Only load if desktop browser
}

With this code, the reCAPTCHA extension would only load on desktop/full browsers.

‎<nomobile> and ‎<mobileonly> tags

The MobileDetect extension also introduces the ‎<nomobile> and ‎<mobileonly> tags, which allow users to control which content is displayed in mobile browsers, and which in desktop/full browsers. Whatever is wrapped between ‎<mobileonly> tags will only be displayed in mobile browsers, and whatever is wrapped between ‎<nomobile> tags will only be displayed in desktop/full browsers. So for example:

<mobileonly>This will not be displayed in desktop/full browsers, only in mobile browsers</mobileonly>
<nomobile>This will not be displayed in mobile browsers, only in desktop/full browsers</nomobile>

The naming and behaviour of the ‎<mobileonly> and ‎<nomobile> tags follows that of the ‎<includeonly> and ‎<noinclude> tags.

#nomobile and #mobileonly parser functions

The MobileDetect extension also introduces the #nomobile and #mobileonly parser functions, which work exactly like the ‎<nomobile> and ‎<mobileonly> tags, with the difference that their content gets parsed so they can contain stuff like {{{1}}} and be used in templates.

However, they don't render all multi-line content correctly, so use them mostly for inline content.

nomobile and mobileonly classes

Alternatively, it is also possible to use the CSS classes directly:

{| class="wikitable nomobile"
|- 
| (Some wikitable stuff.)
|}

See also

• Extension:MobileFrontend