This script/stylesheet is for PERSONAL use only!
You are free to install this script/stylesheet for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:ImportJS, MediaWiki:Common.js, MediaWiki:Common.css, MediaWiki:Fandomdesktop.js or MediaWiki:Fandomdesktop.css), as it would violate Fandom's Terms of Use.
(See the customization policy)
Keep in mind that some scripts will NOT work in the mobile view!
Certain scripts, especially theming and scripts that majorly affect the interface will look bad on a mobile device. Alongside that, the "bottom toolbar" (WikiaBar) is also hidden, hindering access to scripts that rely on it. If you want a maintainer to support a script, see the talk page. (Some scripts may be supported. See theming scripts/stylesheets support for more info.)
ResponsiveMobile, formerly known as Responsive FandomDesktop, is a stylesheet that optimizes FandomDesktop for mobile and tablet devices. This script is currently in beta, due to large optimizations needed to make FandomDesktop usable/look good on small devices. If you encounter any bugs, report it to the talk page.
Resize the browser to see the changes!) to see the effect!
Installation
CSS
Note that you should not combine ResposiveMobile in your imports; Instead, use separate @import statements like:
/* Add this near the TOP of your personal CSS, before anything else. */
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:ResponsiveMobile.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:ResponsiveMobile/wiki-fixes.css&only=styles";
/* Other stylesheets */
@import "something"
Base
This is the base stylesheet responsible for the main mobile improvements. Import it first before anything else.
It contains TopGlobalNav, responsible for moving the global navigation to the top. You can still use the stylesheet separately, since the stylesheet is only enabled on a 600-700px viewport width.
It also imports the editor subpage, which optimizes VisualEditor and source editor.
Wiki-fixes
This "fixes" (optimizes) the stylesheets of the official wikis (CC, Dev, Portability Hub, etc). Note that you must install this separately, for you may have this already implemented in your personal CSS.
Theming scripts/stylesheets support
Some scripts/stylesheets support ResponsiveMobile natively. This is especially true for scripts that simply change the colors of the websites. If a link to a subpage is provided, be sure to import it as well in your CSS.
JS
This script also has a JavaScript version that adds addtional improvements to the base stylesheet. Some of those improvements are:
- Combines the Fandom global navigation, and the wiki navigation. This represents the behavior on FandomMobile:
- Stickies the global navigation.
- Removes the wiki navigation.
- Adds a wiki menu, with the wiki tools (wiki local navigation links will be added soon).
- Adds helper classes:
responsivemobile-loadedandresponsivemobile-js.
Known issues
- VisualEditor will definitely have some bugs. (TODO: Switch to Mobile VE if using VisualEditor)
- Some hitboxes, especially in the editor, will be buggy or too small.
- There will be overflow on some content, especially on wikis with very large tables or non-responsive styling.
Gallery
The below screenshots are from Help:Template parameters.
