Mediawiki anderer Skin für Mobile Devices

Aus Laub-Home.de Wiki
Zur Navigation springen Zur Suche springen

Da immer mehr User mit Mobile Devices surfen, ist es immer mehr Thema eine Webseite mobiledevicefähig zu machen. Der Vector Skin von Mediawiki ist zwar schon ganz gut auf mobilen Geräten zu sehen, dennoch ist die Darstellung gerade auf dem Blackberry zu klein. Deshalb ist hier kurz beschrieben wie man für Mobile Geräte einen anderen Skin auswählen kann.
Bei der Mediawiki Installation ist ein gut brauchbarer Skin namens "Chick" schon mit dabei. Ein anderer für Iphones angepasster Skin wäre WPTouch.
Es gibt eine nette Extension namens MobileDetect, diese spuckt aber ständig Errors im Apache Log aus, deshalb habe ich auf die Methode mit der LocalSettings.php gewählt. Hierfür müssen lediglich folgende Zeilen eingefügt und angepasst werden:

## Default skin: you can change the default skin. Use the internal symbolic
## names, ie 'standard', 'nostalgia', 'cologneblue', 'monobook', 'vector':
#$wgDefaultSkin = "vector";
if (!isset($_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'vector';
} elseif (preg_match("/iphone/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/android/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/webos/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/ipod/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/opera mini/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/blackberry/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'chick';
} elseif (preg_match("/(pre\/|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine)/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} elseif (preg_match("/(iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce; iemobile)/i", $_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'wptouch';
} else {
    $wgDefaultSkin = 'vector';
}

Ich verwende hier für alle Mobile Devices den "wptouch" Skin, außer für die Blackberrys, da hier der "Chick" Skin meiner Meinung nach besser ausgeliefert wird. Wenn kein Mobiles Gerät erkannt wird, wird standardmäßig der "Vector" Skin genutzt. Für Ipads zum Beispiel ist es nicht notwendig den Skin zu ändern, da hier der "Vector" Skin hervorragend angezeigt wird.

Wenn ein Browser keinen Agent String übergibt kann es ohne eine Abfrage ob der String leer ist zu einem Fehler kommen. Darauf gestoßen bin ich beim Erstellen der sitemap.xml Dateien, da hier ein php Skript direkt auf der Shell ausgeführt wird, existiert hier kein Browser String. Hier nun die Fehlermeldung

PHP Notice:  Undefined index: HTTP_USER_AGENT in .../LocalSettings.php on line 115

Die folgende Ergänzung prüft zu erst ob der String leer ist, wenn ja lädt er den vector Skin.

if (!isset($_SERVER['HTTP_USER_AGENT'])) {
    $wgDefaultSkin = 'vector';
} elseif (preg_match("/iphone/i", $_SERVER['HTTP_USER_AGENT'])) {

Quellen