Smartphone et affichage


#1

Salutations à tous,

Je fais l’expérience en ce moment de l’affichage de mon Tiddlyweb sur mon smartphone. Voici mes constatations.
bonne impression : ça s’affiche de façon satisfaisante, c’est à dire que la page est lisible et peut défiler sans problèmes, les caractères sont assez gros, c’est une excellente chose et les images que j’inclue dans mes tiddlers apparaissent très clairement.
à améliorer si c’est possible :
La barre de menu occupe 4 lignes chez moi (samsung mini S4, c’est pas un écran très grand non plus). Il faudrait pouvoir basculer de l’affichage oueb ordinateur à un affichage smarphone et/ou tablette. Ceci dit le côté positif c’est qu’on a pas l’affichage d’une ligne illisible tout en haut comme sur beaucoup de sites oueb classiques.
La page est légèrement étirée verticalement, cela nuit notamment à la présentation d’images (la question du format des images me semble considérable par ailleurs, certaines images de mon site ne rentre pas dans l’écran, d’autre s’y adaptent en s’allongeant).

Il se pourrait que Tiddlyoueb puisse s’ajuster sans trop de frais au smartphone, une page intéressante sur le sujet.

A+


#2

Bonjour @jargenty,

En principe, la gestion des comportements suivant les résolutions d’écrans passe par un tag @media {max-width: … } et @media {min-width: … } dont l’objet est d’indiquer les limites d’un comportement à l’affichage.

Par exemple, dans le thème Vanilla du site officiel, il est indiqué qu’en dessous de 960 px, la SideBar doit se placer au dessus de la story river.

@media (min-width: 960px) {
.tc-sidebar-scrollable { position: fixed; top: 0px; ...; }

Dans ton cas, la barre de menu est déjà positionnée en haut, quelque soit la résolution. Simplement, comme tu l’indiques, tes menus s’étalent sur 4 lignes, mais on les voit distinctement.

OK mais où placer ce menu ?

  • Sur l’un des bords d’écran ? Trop petit
  • En haut, avec les titres en liste : Pourquoi pas, mais pas très esthétique.

Dans l’application TiddlyFrame, je gère cette situation non pas via la gestion des medias mais par la modification du template avec pour idée de ne disposer d’aucune barre de menu en visualisation (ce que je nomme la page blanche). Pour pouvoir accéder au menu j’ai ajouté une icône aux boutons de contrôle qui permet de déclencher le tiddler dans lequel se trouvent les menus par l’ouverture d’une fenêtre en popup.

En principe (mais je n’ai pas pu refaire le test depuis que je suis passé sur la version 5.1.17 avec hébergement chez GitHub où j’ai un problème d’incompatibilité Tiddlywiki sur tablette et smartphone) tu devrais obtenir deux tables sur ton smartphone : la première avec la page vierge de menu et une seconde avec uniquement le menu.

Tu peux ainsi passer d’un menu à l’autre en passant par la page séparée de menu. Le contenu d’un nouveau lien de menu s’ouvrira ainsi dans la page principale.

L’intérêt c’est que la totalité de ton écran est dédié au contenu textuel de tes tiddlers.

Si ce post ne résout pas le problème dans ta situation actuelle, au moins aura-t-il le mérite te te donner une piste supplémentaire de recherche. J’ai mis l’exemple en ligne : https://prolegomenes.github.io/learn/FrameWhitePage.html Si tu as le temps peux revenir vers moi en m’indiquant si ce wiki fonctionne sur smartphone ou bien si tu as le même problème que moi (Tiddlywiki me donne une erreur générale et ne peut démarrer) L’appli fonctionne bien sur mon ordinateur portable.

Merci