Manual:Mobiles, tablets and responsive design

MediaWiki will work on many mobile devices (ie. smartphones and tablets), but it is not optimized for mobile devices. Unless you add additional skins or extensions, this means that sites may be difficult to view, with menus, layouts and media, not appearing in the best place.

Except for the skin Timeless, none of the skins bundled with MediaWiki, including the latest default skin,, are optimized for use with mobiles. This page provides advice for using MediaWiki on mobile devices, such as smartphones and tablets.

Solutions
There are two common approaches:


 * is already bundled with MediaWiki. Make sure it is registered in LocalSettings.php so it is available as a setting in preferences. Consider using it as the.
 * is bundled with MediaWiki since version 1.38. Its mobile mode requires installing . This is the method Wikipedia uses.

Extensions

 * - Simple app that serves styles and scripts for use in the Wikimedia mobile applications
 * - Provides a mobile-friendly view. Developed by Wikimedia, and used on Wikipedia. Installing only this extension by itself, will make your MediaWiki site mobile-friendly, and it includes its own skin.

Skins
You do not require an extension if you use a skin. Skins for use with mobile browsers come in two forms:


 * 1) Those designed specifically for use with a mobile, and may not view well on non-mobile devices. MediaWiki detects the kind of device on which it is running, and then switches to the appropriate skin. (See Extension:MobileDetect )
 * 2) - A skin which formats your wiki with a mobile theme
 * 3) Responsive skins, which are designed to respond automatically to the size of the screen, regardless of whether it is a desktop PC, tablet or smartphone.
 * 4)  - optimized for Semantic wikis
 * 5) - customizable with five different layouts
 * 6) - uses responsive CSS to adapt to mobile devices
 * 7) (MW 1.31+) - Wikimedia skin that supports responsive design
 * 8) ...and more!
 * 1) (MW 1.31+) - Wikimedia skin that supports responsive design
 * 2) ...and more!
 * 1) ...and more!

CSS & JS
When using , you can edit the wiki pages (see  ) and  for global styles and scripts to be applied only on mobile.

Developers
See also:


 * - Projects, extensions and other pages related to Mobile device development and presentation.
 * - responsible for creating, growing, and evolving how the diverse set of Wikimedia projects use mobile technologies
 * (MW 1.21+) - Whether or not to output high-resolution images for high-DPI displays.
 * (MW 1.15+) - allows users to control which content is displayed only in mobile browsers, or only on desktops
 * - Skins for mobile devices