PmWiki | Skins / Mobile

Minimous < Skins > Monobook (test page | set as default | unset | validate)

Summary: Plain PmWiki template that is compatible with mobile devices.

Version: 18-Nov-2011

Prerequisites: None; if you want mobile browser detection requires Detect Mobile Free or Detect Mobile recipe.

Status: Active

Maintainer: XES

Categories: Skins Mobile

Users: +1 (view / edit)

Download: mobileskin.zip Δ

License: (CC)-BY @andytir at Twitter.com for the skin

Users: +1 (View / Edit)

Create a mobile-device compatible template for your website

This is a very bare-bones basic template that is mobile-device compatible. There's no frills here, so you may want to use this in conjunction with DetectMobileFree (or DetectMobile) as a mobile-only skin.

Description

PmWiki skin compatible with mobile devices such as iPhone, iPod Touch, cell phones, Android devices, etc..

Installation

Download the package, place the entire contents including the "mobile" folder into your pub/skin/ directory.

To enable the skin site-wide add change the $Skin = 'pmwiki'; line to: $Skin = 'mobile';

Configuration

Usage

Notes

Change log / Release notes

Contributors

Thanks to http://cssgrid.net/ for the original template ("1140 CSS Grid: 12 columns fluid to mobile"). The original template is Creative Commons By-attribution, created by Twitter's @andytir.

Crisses aka XES adapted the original template to PmWiki, and really seriously dumbed it down. It's much more adaptable than it appears, with very slick HTML code that's easy to play with on the back-end.

Comments

See discussion at Mobile-Talk ?

FAQ

How can I make this template only show for mobile devices?

After installing the template into your /pub directory, install the DetectMobileFree recipe. Then add these lines to your config.php file instead of the "$Skin = 'pmwiki';" line.

include_once("$FarmD/cookbook/detectmobilebrowsers.php");
if(detect_mobile_device()) {
   $Skin = 'mobile';
} else {
   $Skin = 'pmwiki';
}

How can I make this into the main template look better on iPad, computer and laptop displays?

You can use the instructions at http://cssgrid.net and some basic knowledge of HTML to customize the design of your website. This template can have up to 12 columns, so it's based on a 12 block grid. I made the skin very basic because it's meant for mobile devices, but you have a lot of room to make this design pretty for standard web browsers. There's many examples at that website. In case the website goes away, the main webpage is included in the package (view "documentation.html" in a browser -- all images have been removed so you're better off viewing on the original site).

How can I exclude the iPad from the mobile browser?

DetectMobileFree already excludes tablet devices.

If you're using DetectMobile, try this instead:

if(detect_mobile_device() && (!strstr($_SERVER['HTTP_USER_AGENT'],'iPad'))) {
   $Skin = 'mobile';
} else {
   $Skin = 'pmwiki';
}

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Skins listings and will help newcomers browsing through the wiki.

Mobile