Fini les mises en page mobiles/bureau commutables ?

Bonjour, j’étais sur stable, maintenant sur la dernière esr, et il semble qu’il n’y ait plus de mise en page mobile/bureau commutable explicitement ? Je ne vois plus le commutateur dans le coin inférieur gauche de la barre latérale, et ?mobile_view=1 / ?mobile_view=0 n’a plus aucun effet. Il passe maintenant du mode bureau avec la barre latérale et le menu hamburger à gauche à la mise en page mobile sans barre latérale et le menu à droite simplement en redimensionnant horizontalement la fenêtre du navigateur de bureau. Est-ce donc maintenant basé uniquement sur la largeur du navigateur ? Auparavant, cela permettait d’utiliser la mise en page mobile simplifiée sur un écran de tablette plus large si désiré, ou alternativement, cela permettait d’utiliser le mode bureau (avec plus de détails dans la liste des sujets par exemple) sur un téléphone plus petit ou une fenêtre de navigateur étroite pour les utilisateurs qui le préféraient.

2 « J'aime »

C’est exact - nous avons évolué vers la simplification de nos mises en page pour qu’elles soient correctement responsives, car il s’agit d’une norme de conception plus largement acceptée d’utiliser un point de rupture sensible à la largeur. Nous avons également constaté qu’il était plus simple à maintenir, et une disposition basée sur la largeur s’intègre bien avec d’autres éléments de conception externes, comme lors de l’intégration de bannières partagées sur un site principal et un forum.

5 « J'aime »

L’un des inconvénients de cette approche est que vous ne pouvez pas exécuter de logique spécifique à l’appareil dans un initialiseur.

Un exemple classique est de définir une page d’accueil différente pour mobile par rapport au bureau - vous ne pouvez pas le faire maintenant.

À mon humble avis, cela va nécessiter une approche beaucoup plus dynamique de la manière dont les modèles sont créés.

3 « J'aime »

Merci pour la réponse. En principe, cela a du sens, mais en pratique, c’est un peu problématique pour les utilisateurs plus avancés/fréquents. Comme je l’ai mentionné, il y a beaucoup moins d’informations visibles dans la liste des sujets lorsque le mode de mise en page réduit est utilisé, surtout lorsque l’on utilise quelque chose comme Sam's Simple Theme, donc certains préféraient forcer explicitement la mise en page de bureau, et cela s’adaptait même correctement pour s’ajuster horizontalement sans déborder.

2 « J'aime »

Il y a des limites à ce que nous avons supprimées avec les nouvelles méthodes — déterminer les capacités à l’initialisation est assez rigide, si quelque chose change nous devrions recharger toute la page.

C’est utile car les appareils sont moins prévisibles maintenant : les téléphones peuvent se déplier en tablettes, les ordinateurs portables peuvent se transformer en tablettes, vous pouvez brancher un clavier et une souris sur tellement de choses…

Cela semble différent si vous êtes habitué à l’ancienne méthode, mais tout ce que vous faisiez dans un initialiseur est probablement toujours possible et plus réactif aux capacités changeantes.

Vous pouvez, maintenant c’est plus granulaire et vous affichez/masquez conditionnellement le contenu au sein du même modèle plutôt que de tout remplacer. Par exemple, nous avons maintenant un objet viewport dans notre service de capacités…

Dans un modèle…

{{#if this.capabilities.viewport.lg}}
  Contenu pour les grands écrans
{{/if}}

{{#if this.capabilities.viewport.sm}}
  Contenu pour les très petits écrans 
{{/if}}

ou en JS…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "contenu court";
  } else {
    return "le très très long contenu"
  }
}

et ensuite en CSS vous pouvez vous aligner avec les mêmes points de rupture comme…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 « J'aime »

Bien sûr, je suis au courant de ces remplacements.

J’ai hâte de voir ces modèles utilisés de manière plus fondamentale cependant.

Par exemple, si ma page d’accueil est une liste de catégories sur ordinateur de bureau, je peux voir une liste de sujets.

Une liste de sujets devrait également s’afficher sur mobile, selon toute vraisemblance… actuellement, vous perdez l’élément de liste de sujets.

C’est pourquoi le TC (Topic Change) de Forcer la page d’accueil mobile existait…

J’espère que je suis clair…

4 « J'aime »

Oui, ça a du sens, je pense que nous allons progressivement apporter des changements de soutien comme celui-là… c’est juste délicat lorsque nous avons construit tellement de choses en utilisant les anciennes méthodes et que nous devons les prendre en charge d’une manière qui ne casse pas immédiatement la personnalisation.

5 « J'aime »

Malheureusement, je dois continuer un peu sur ce sujet en raison des utilisateurs qui n’aiment vraiment pas la mise en page mobile simplifiée. Cela semble être particulièrement le cas pour les utilisateurs de tablettes en orientation verticale.

Donc, je suppose que je suis encore un peu confus quant à ce qui a exactement changé. Le basculement :desktop_computer: / :mobile_phone: a-t-il simplement été supprimé de la barre latérale ? Cette même méthode JS peut-elle toujours être invoquée avec un script personnalisé ou autre chose ? Ou y a-t-il un changement dans le code de la mise en page de bureau qui l’empêchera de s’adapter de manière réactive aux largeurs de navigateur plus étroites ?

Il semble que l’option « Site de bureau » du navigateur (testée dans Chrome et Firefox sur une tablette Android) force l’ancienne mise en page qui correspondait à l’ancien basculement :desktop_computer: / :mobile_phone: de Discourse, et elle s’adapte toujours de manière réactive sans déborder. Mais le texte semble beaucoup plus petit que ce dont je me souviens.

Je sais aussi comment sélectionner des points de rupture de largeur spécifiques, c’est-à-dire @media screen and (max-width: 1000px) {… mais je ne sais pas si quelque chose pourrait être fait là avec des remplacements CSS ?

1 « J'aime »

Je suis d’accord avec ça, je n’ai jamais vraiment aimé la mise en page mobile sur mon téléphone, elle semble beaucoup plus restrictive et tout est beaucoup trop grand à moins que mon zoom ne soit réduit de moitié. J’ai toujours utilisé la mise en page de bureau ici jusqu’à ce que je ne puisse littéralement plus.

Je comprends la simplicité de maintenir une seule mise en page et de ne pas s’inquiéter de changer, mais le choix est parfois agréable…

1 « J'aime »

Non, il n’est pas seulement supprimé de la barre latérale. Nous avons supprimé la structure sous-jacente pour basculer.

3 « J'aime »

Cela signifie-t-il que Force Mobile Homepage devrait être étiqueté comme broken ?

1 « J'aime »

Je l’ai marqué comme cassé.

Pour cette raison :

2 « J'aime »

Alors, pour forcer le site à ne pas revenir à la mise en page mobile simplifiée avec les largeurs verticales de tablette normales, pourrais-je utiliser quelque chose comme ceci dans le CSS ? @media screen and (max-width: 700px) {

Ou bien, l’option « Site de bureau » dans le navigateur mobile est-elle la seule option à recommander aux utilisateurs ?

Peuvent-ils tester en utilisant « Demander le site de bureau » conjointement avec l’augmentation de la taille de la police dans \u003chttps://meta.discourse.org/my/preferences/interface\u003e ?

Bonjour, merci pour votre réponse.
Un utilisateur a essayé le bouton bascule « Site de bureau » dans le navigateur, mais a signalé que cela n’avait fait aucune différence. Sur ma tablette, cela passe à la disposition de bureau avec toutes les informations, mais même avec la taille « La plus grande », le texte est à peine assez grand, et ce n’est pas idéal de le définir dans les préférences de l’utilisateur car cela rend le texte beaucoup trop grand sur d’autres appareils comme un PC qui utilise le même compte.

2 « J'aime »

Vous n’avez pas besoin d’utiliser la même taille de police sur tous les appareils.

1 « J'aime »

Hmm, je ne suis pas sûr de comprendre pourquoi je n’ai pas cette option ?

Je suppose que « normal » est votre paramètre par défaut actuel. Avez-vous essayé de sélectionner quelque chose d’autre ?

2 « J'aime »

Oh, mince. :wink: Merci, ça aide un peu, je suppose.

Honnêtement, je ne me souviens plus comment fonctionnait la mise à l’échelle de la taille de la police dans l’ancien mode bureau explicite sur un écran vertical plus petit, mais il me semble qu’ils étaient plus grands dans l’ensemble. Je devrai peut-être ajouter des remplacements CSS pour le paramètre « Le plus grand »…

1 « J'aime »