Wikilivres/Version mobile

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 écrans (notamment sur téléphone portable).

Avertissement !

Suite à une modification de MediaWiki pensée pour Wikipédia seulement, mais imposée à tous les projets, le premier paragraphe de texte ayant suffisamment de mots est remonté tout en haut de la page dans les versions mobiles. Cela perturbe donc l'affichage de la plupart des livres sur mobile.

Bravo aux développeurs MediaWiki pour cette superbe faute qui ne sera jamais corrigée !

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 barres 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).

Colonnes

L'affichage de plusieurs colonnes n'est pas possible sur les appareils mobiles à largeur limitée.

Pour les colonnes, utilisez la classe CSS "flex-content" pour le conteneur et selon le nombre de colonnes :

pour 2 colonnes, utilisez la classe CSS "flex-content-half" pour chacune des colonnes ;
pour 3 colonnes, utilisez la classe CSS "flex-content-third" pour chacune des colonnes.

Exemple :

----
<div class="flex-content">
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-half">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
</div>
----
<div class="flex-content">
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 1</div>
Le contenu de la première colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 2</div>
Le contenu de la deuxième colonne...
</div>
<div class="flex-content-third">
<div style="font-size: 40pt">Colonne 3</div>
Le contenu de la troisième colonne...
</div>
</div>
----

Colonne 1

Le contenu de la première colonne...

Colonne 2

Le contenu de la deuxième colonne...

Colonne 1

Le contenu de la première colonne...

Colonne 2

Le contenu de la deuxième colonne...

Colonne 3

Le contenu de la troisième colonne...