User:Jon Harald Søby/mobilePreview

Video showing how the user script works

mobilePreview is a user script that lets you preview the mobile version of any wiki page you're on with a sleek, intuitive interface. It makes heavy use of CSS variables in order to let users customize various aspects of the preview.

The purpose of the script is to easily let editors, who primarily use computers, see what pages look like on mobile, which the majority of readers use to access Wikipedia and other wikis.

Enable

In order to enable the user script, add the following to your global.js (on Meta) or common.js (on whatever wiki you want):

// [[m:User:Jon Harald Søby/mobilePreview.js]]
mw.loader.load( '//meta.wikimedia.org/w/index.php?title=User:Jon_Harald_Søby/mobilePreview.js&action=raw&ctype=text/javascript' );

Features

The script adds a portlet link that, when clicked, displays an imitation of a phone screen in an <iframe> tag. In certain circumstances, like when the main viewport is too small to display the phone, or if wgBreakFrames is true for the page (typically on edit pages and certain special pages), it will instead open the mobile preview in a popup window.

Within both iframes and popup windows, the script adds handling for Esc key presses, in order to quickly close the preview.

Customization

Most aspects of the window can be customized by placing certain CSS in your global.css (on Meta) or common.css (on any wiki).

/* Customization for [[m:User:Jon Harald Søby/mobilePreview.js]] */
:root.userjs-mobilepreview {
	/* Pixel width of the phone screen, without px unit */
	--userjs-mobilepreview-phone-width: 360;
	/* Pixel height of the phone screen, without px unit */
	--userjs-mobilepreview-phone-height: 800;
	/* Border radius for the phone */
	--userjs-mobilepreview-border-radius: 2rem;
	/* Transition duration. Set to 0s to disable transitions */
	--userjs-mobilepreview-transition-duration: 2s;
	/* How far away from the side of the screen the phone should be */
	--userjs-mobilepreview-distance-from-side: 4vw;
	/* Backdrop filter for the rest of the page when the phone is shown */
	--userjs-mobilepreview-backdrop-filter: blur( 2px );
}