 |
The below is legacy content. Gamepedia wikis now use FandomMobile which at present can only be modified by Wiki Representatives. |
With the implementation of the MobileFrontend extension, wikis use a special skin on mobile devices, located at MediaWiki:Mobile.css, with the corresponding JavaScript file at MediaWiki:Mobile.js.
Mobile styling considerations
Styling for a mobile environment comes with a few special considerations in general:
- Screen size: Generally speaking no one will be viewing the mobile view at a higher resolution than 1024x768px, so elements must be appropriately sized to both fit and remain legible on the small screen. The responsive design mode in your browser's developer tools may be used to simulate different device sizes (guide for Firefox, Chrome).
- Data limits: Not everyone has unlimited data or consistent access to WiFi on their mobile device, so any images and files used in the styling of the mobile skin should be kept small. In general, JPG files result in smaller file sizes and therefore should be used on mobile skins instead of PNG files.
In addition, styling for wikis on mobile frontend comes with some additional considerations:
- The mobile skin does not use any styles from the desktop skin, and therefore must be styled entirely separately. Any custom styles applied to the desktop skin must also be applied on the mobile skin in order for them to be visible on mobile.
- Some elements from the desktop view are hidden by default on mobile view, including the wiki logo, navboxes, and the sidebar.
Examples
- Light-themed mobile skin on Leaguepedia
- Dark-themed mobile skin on this wiki
Sample CSS
Sample CSS files for light and dark mobile themes can be found on the Gamepedia default loadout:
Using Gadgets for dark mobile skins
The default mobile skin is a light-themed skin, regardless of whether the wiki uses Hydra or Hydra Dark as its default skin. It is possible to re-style the MobileFrontend with a dark skin, however one consequence of this is that the MobileFrontend extension loads the mobile CSS through JavaScript on every page load - meaning that the CSS will not be cached and that major changes to the design of the page from the default style will "pop" into place, often an undesired effect, especially when switching from light to dark themes. Because the default mobile frontend skin is light themed, there will be a brief moment where the default light colors will be shown before the JavaScript fully initializes and loads the dark theme instead.
A workaround to this is to use the Gadgets extension to create a dark mobile theme. Since Gadgets CSS files load through ResourceLoader, they will load with the rest of the CSS and be cached appropriately. One caveat to this is that all selectors used in a mobile-specific gadget must be prefixed with .skin-minerva to avoid affecting the desktop theme as ResourceLoader parameters to target the specific skin/user type are currently bugged and styles targeted to mobile apply on both mobile and desktop skins.
Troubleshooting
Styles get overridden by MobileFrontend defaults
MobileFrontend uses some excessively specific CSS selectors in its default styles, resulting in some style being overridden by the default. This can often be solved by simply prepending .skin-minerva to the selector of the style that is being overridden.
Mobile view doesn't load at all
| |||||||||||||||||||