How To Set Mobile Skin for MediaWiki

More and more users are browsing the Internet using a mobile device. It is preferred to provide good experience for these users. One method to service a mobile version of the page to a user with a mobile device. This tutorial introduces how to add mobile skin support for MediaWiki.

Skin for mobile devices

I use the WPtouch skin here as the example. The Download for MediaWiki 1.18 and later works well for MediaWiki 1.19.

Configure automatic skin changing

Then, after installing the wptouch skin, configure the automatic changing of skins for mobile devices. Add these lines in the LocalSettings.php:

## Default skin: you can change the default skin. Use the internal symbolic
## names, ie 'vector', 'monobook':
if (preg_match("/(mobile|webos|opera mini)/i", $_SERVER['HTTP_USER_AGENT'])) {
    // Mobile skin
    $wgDefaultSkin = 'wptouch';
} else {
    // normal skin
    $wgDefaultSkin = "vector";
}

Set the Logo

Last, set the left-top logo image for the mobile skin. By default, it is the apple-touch-icon.png in your site’s root directory. Just copy your logo to that file.

Then, it should works now with mobile devices.

Tips on File Cache

If you are using File Cache for your MediaWiki, you may need to disabled the FileCache for Mobile devices, or use a separate directory for the File Cache to avoid servicing pages for normal screens to mobile devices.

method 1 (recommended): use a separate directory for File Cache for mobile devices. Put these lines before $wgDefaultSkin = 'wptouch';.

// Different file cache dir for mobile devices
$wgFileCacheDirectory = "$IP/html_cache_mobile";

Method 2: disable File Cache for mobile devices. Put these lines before $wgDefaultSkin = 'wptouch';.

// Disable file cache for mobile devices
$wgUseFileCache = false;