Mobile Friendly

From Foundation
Jump to navigation Jump to search

Mobile Friendly


If you've had the chance to view Foundation using a smart-phone, tablet, screen reader or maybe even shrinking your browser screen, you'll notice that Foundation is compatible with most mobile devices. In fact, we've gone to great lengths to ensure this is the case, even creating an extension.

Bootstrap 4.4 helps a lot by adding hidden classes which has enabled us to hide mw-panel & mw-head, producing a silky smooth looking wiki no matter what device the reader is using.

Mobile View

The browser's viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

If Foundation were a skin, I could have simply added to the <head>;

<meta name="viewport" content="width=device-width, initial-scale=1">

As Foundation is an extension, with no access to the skin I chose to add to FoundationSettings.php;

$wgHooks['OutputPageParserOutput'][] = 'onOutputPageParserOutput';

function onOutputPageParserOutput( OutputPage &$out, ParserOutput $parseroutput ) {

	$out->addMeta( 'viewport', '<meta name="viewport" content="width=device-width, initial-scale=1">' );

	return true;

Bootstrap Hidden Classes

Bootstrap 4.4 comes with several classes that allow you to hide elements to mobile devices, which is useful if you want your wiki to look great on every device.

Screen Size Class
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

You don't use the dot . when adding the hidden and visible classes, use;

<div class="d-none d-xl-block">Content .... </div>

Any problems ask questions in the Discussion tab above.


Retrieved from ‘