Wikilivres est également accessible depuis les appareils mobiles (tablettes, téléphones portables...). L'habillage du site est différent (minerva).

Les pages des livres doivent donc suivre des règles pour pouvoir s'afficher correctement à la fois sur grands écrans (navigateurs sur ordinateurs, tablettes de grande taille) et sur petits écran (notamment sur téléphone portable).

Tester la version mobile

Pour afficher la version mobile, vous pouvez activer le gadget Gadget-MobileView dans l'onglet "gadgets" de vos préférences.

Pour utiliser ce gadget sur tous les projets de WikiMedia, vous pouvez également copier les 2 lignes suivantes dans votre javascript global :

mw.loader.load( '//fr.wikibooks.org/w/index.php?title=MediaWiki:Gadget-CommonDom.js&action=raw&ctype=text/javascript' );
mw.loader.load( '//fr.wikibooks.org/w/index.php?title=MediaWiki:Gadget-MobileView.js&action=raw&ctype=text/javascript' );

Le gadget ajoute un lien en haut à droite intitulé "aperçu mobile" qui affiche une fenêtre de taille réduite sur la version mobile de la page wiki active. Vous pouvez agrandir la taille de la fenêtre en modifiant la configuration du gadget dans votre javascript local.

Parties spécifiques

Certaines classes CSS sont définies pour exclure / inclure des parties de la page dans les sites mobiles et non mobiles :

• Par défaut, les éléments sont affichés sur les deux sites.
• La classe CSS "only_mobile" affiche l'élément pour le site mobile seulement. Il sera caché sur le site non mobile.
• La classe CSS "only_nonmobile" affiche l'élément pour le site non mobile seulement. Il sera caché sur le site mobile.

Exemple : Vous regarder la version pour appareil mobilepour desktop de cette page.

Tables

Les tables posent un problème d'affichage sur les écrans de petite taille : le nombre de colonnes peut provoquer l'affichage de barre de défilement qui ne sont pas pratiques à utiliser sur les appareils mobiles, ou bien les colonnes sont affichées avec une largeur réduite et leur contenu est illisible.

Pour éviter les problèmes, il est recommandé d'utiliser la classe CSS "flexible" sur la table, qui permet aux tables de s'afficher verticalement quand la largeur disponible est réduite (inférieure à 720 pixels).