[AwesomeBB] Échelle de la version web sur mobile

[Feu Ardent]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome, Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour à tous et toutes!

Je me permets de vous déranger encore en espérant trouver une solution à un problème rencontré sur mon forum!

La version Awesomebb sur téléphone semble conserver le forum à la même échelle, ce qui rend le contenu vraiment écrasé (exemple: https://i.imgur.com/NjFz6HO.png).

Je voulais savoir s'il y avait un moyen d'afficher le forum davantage comme il l'est sur Phbb2 lorsqu'on arrive à la version mobile (exemple ici: https://i.imgur.com/tTvd6um.png )?

Merci d'avance à vous!

FA

[Toryudo]

Bonjour !
Alors, je ne suis pas sûr de comprendre, parce que la version Awesomebb est justement celle qui s'adapte le mieux aux téléphones (et à tous les écrans en général). Par exemple, un message sur un téléphone ressemble à ça :



L'avatar prend moins de place, beaucoup d'informations ne sont plus affichées parce qu'elles prendraient justement trop de place, et le texte arrive ensuite, sous les éléments de profil du posteur.
Du coup, ce doit être votre CSS personnalisé ou vos templates qui donnent ce résultat.

[Feu Ardent]

Bonjour @"Toryudo" et merci pour ta réponse! C'est en effet assez difficile d'expliquer ce que je recherche mais les deux screens montrés plus haut illustrent plutôt bien le résultat recherché. En effet, le CSS du forum est personnalisé, et sur un forum type phbb2 cela ne cause pas de soucis car sur l'affichage web des sujets, le forum se contente de rétrécir toute la page pour la faire rentrer sur l'écran mobile. Le code awesomebb quant à lui est cependant responsive, ce qui créé des soucis d'affichage sur mobiles. Ma question est simplement de savoir s'il y a une façon de désactiver les options responsive sur mobile d'Awesomebb (ou de forcer l'affichage tel que sur phbb2, qui rétrécit toute la fenêtre pour la faire entrer dans l'écran plutôt que d'adapter le codage en responsive). Je ne sais pas si ma question est plus claire maintenant?

[Toryudo]

Bonjour !
Pour le coup, le but du design Awesomebb est d'être responsive, on ne peut pas le désactiver. On pourrait imaginer ajouter plein de CSS pour "contrecarrer" cette idée de responsive, mais ça me parait contre-productif... Je pense que si vous n'aimez pas ce rendu, mieux vaut ne pas choisir Awesomebb, ce serait compliqué de tout désadapter !

Ou alors, vous modifiez radicalement votre CSS personnalisé pour moins perturber le design responsive de Awesomebb, il s'adaptera alors mieux que votre rendu visuel actuel. Parce que dans tous les cas, le design par défaut fonctionnerait et serait plus propre.

[Feu Ardent]

Bonsoir @"Toryudo" et merci de ta réponse!

Personnellement je trouve que cela semble moins contre-productif que de devoir changer entièrement toute la version d'un forum déjà codé de la tête aux pieds (et donc, recoder tout le forum de zéro) à cause d'un bug.  

En l'occurence ma coéquipière m'offre une nouvelle information, qui est que le forum s'affiche bien comme désiré sur son téléphone (Samsung): https://i.imgur.com/1A73onW.jpg (le mien est un iPhone, et s'affichait donc de la façon non-désirée: https://i.imgur.com/NjFz6HO.png – il s'agit du même affichage que dans l'inspecteur d'éléments sur Chrome également)

Donc la question s'adapte: est-il possible d'obtenir le rendu désiré sur tous les mobiles? Peut être qu'il y a une astuce en ajustant cette balise là?

Code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Merci d'avance pour ta réponse !

[Cloo]

Sur les téléphones, il y a l'option d'affichier un site en version Web ou version ordinateur.

Sur Androïd, le menu "hamburger" en haut à droite, et choisir "Version web ou version ordinateur.
Sur iPhone (que je ne connais pas, mais j'ai fait la recherche pour un autre site que je gère):
https://iphonesoft.fr/2019/06/14/comment-afficher-version-web-ordinateur-ios-13

Je ne sais pas s'il y a moyen de toujours rester dans le mode choisi pour un site en particulier?

[Feu Ardent]

@"Cloo" hello! Les deux captures sont bien sur l'affichage de la "version web" dans les deux cas

[Toryudo]

Bonjour !

En l'occurence ma coéquipière m'offre une nouvelle information, qui est que le forum s'affiche bien comme désiré sur son téléphone (Samsung): https://i.imgur.com/1A73onW.jpg (le mien est un iPhone, et s'affichait donc de la façon non-désirée: https://i.imgur.com/NjFz6HO.png – il s'agit du même affichage que dans l'inspecteur d'éléments sur Chrome également)

Hm, ce serait peut-être une affaire de navigateurs différents plutôt ? Vous sauriez me dire quel est son navigateur internet et quel est le vôtre ? Et si vous en avez un différent, est-ce que vous pourriez tenter de prendre le même qu'elle et voir si avec ce navigateur, tout est plus propre ?

Donc la question s'adapte: est-il possible d'obtenir le rendu désiré sur tous les mobiles? Peut être qu'il y a une astuce en ajustant cette balise là?

Code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ce serait éventuellement faisable, mais j'ai peur que toucher à cette balise ne casse autre chose, elle est assez susceptible...
Est-ce que vous pourriez nous donner l'adresse du forum en question ? Si vous me dites qu'on peut voir la chose sur Chrome version PC, je pourrai tenter de regarder un peu.

[Feu Ardent]

@"Toryudo" bonjour et merci à toi de ta réponse!

Ma coéquipière est sur chrome, moi Safari – néanmoins sur Chrome sur ordi, quand j'inspecte l'élément en affichage mobile, ça me fait le même bug que quand je l'affiche sous Safari. Je n'ai pas encore testé sur Chrome mobile, j'essaie de tester ça demain.

Le forum en question est le suivant, j'ai même créé un sujet test qui permet de prévisualiser les sujets/profils directement pour voir le bug en direct. Merci d'avance à toi d'y jeter un oeil! En espérant que tu sauras trouver une solution à ce petit problème

[Feu Ardent]

Bonjour @"Toryudo"! Je me demandais si tu avais eu le temps de jeter un oeil à ceci? Merci d'avance!

[Toryudo]

Bonjour !
J'essayais des choses en attendant que vous vérifiiez Chrome mobile sur les deux téléphones, histoire de voir si le "problème" pouvait venir de Safari ou carrément de l'appareil (Android vs Ios par exemple)... mais de mon côté, je ne trouve rien de vraiment satisfaisant. Ça m'embête que les navigateurs (ou les appareils peut-être) ne réagissent pas tous de la même manière à la balise viewport... et de mon côté, je n'ai pas de quoi tester toutes les configurations possibles.

Force est de constater que le navigateur/appareil https://imgur.com/1A73onW dézoome pour afficher plus de choses, quand le navigateur/appareil https://imgur.com/NjFz6HO décide d'avoir un niveau de zoom 100% classique. Je ne sais pas lequel a raison sur la manière de faire, ni c'est une option qu'on peut changer dans les navigateurs ou sur les appareils...

Non, franchement, je ne vais pas pouvoir aider plus que ça si vous souhaitez garder ce visuel avec deux colonnes, profil à gauche et message à droite. Il faudrait qu'une personne avec un Android+Chrome et un Ios+Safari sous la main passe et regarde, je ne sais pas si c'est un problème connu ou non dans le milieu du développement web spécifique pour téléphones, désolé !

[Feu Ardent]

Hello @Toryudo ! Merci à toi d'avoir essayé et pas de soucis, j'ai demandé à chatgpt au cas où et l'IA m'a conseillé ceci, qui fonctionne du tonnerre:

Code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

À remplacer dans le template overall_header, à la place du "viewport" par défaut.

Problème résolu du coup je crois!