Quel navigateur charge l'affichage mobile correct ?

[hipp0]

J’ai essayé Edge, Firefox, Brave et Chrome. Aucun d’entre eux n’affiche la vue mobile correcte, j’essaie de modifier le menu déroulant mobile mais il affiche ce menu en vue de bureau.

Sur l’iPhone Safari, Chrome s’affiche correctement.

[ToddZ]

La méthode habituelle consistait à ajouter ?mobile_view=1 à la fin de l’URL. Discourse évolue vers une conception réactive basée sur la taille de la fenêtre d’affichage, donc selon le thème, cette substitution pourrait ne plus fonctionner.

[NateDhaliwal]

@hipp0

J’essaie de modifier le menu déroulant mobile mais il affiche ce menu de vue de bureau

Faites-vous référence au paramètre de site menu de navigation ?

[darkpixlz (Pyx)]

@ToddZ

La méthode habituelle consistait à ajouter ?mobile_view=1 à la fin de l’URL

Je crois en fait que cela a été supprimé il y a quelques jours, malheureusement :

No more switchable mobile/desktop layouts?

No, it’s not just removed from the sidebar. We have removed the underlying structure to toggle.

[Lilly]

oui, le ?mobile_view=1 est hérité et considéré comme obsolète - le nouveau style mobile a été activé l’année dernière :

@system

Modes Mobile / Bureau Hérités

Historiquement, Discourse livrait deux mises en page et feuilles de style complètement différentes pour les vues « mobile » et « bureau », basées sur l’agent utilisateur du navigateur. Les développeurs ciblaient ces modes en plaçant le CSS dans des répertoires mobiles/bureau spécifiques, en utilisant les classes HTML .mobile-view/.desktop-view, et la valeur booléenne site.mobileView en JavaScript.

Ces techniques sont maintenant considérées comme obsolètes et doivent être remplacées par les stratégies basées sur la vue et les capacités discutées ci-dessus. Nous supprimerons les modes dédiés dans un avenir proche, faisant de « mode mobile » un alias pour « largeur de vue inférieure à sm » pour des raisons de rétrocompatibilité.

Je ne suis pas sûr de ce que vous avez fait sur votre propre forum pour les personnalisations, mais je ne peux pas reproduire ce problème sur aucune instance ou appareil. Est-ce que cela se produit en mode sans échec ?

[hipp0]

J’ai réussi à l’afficher en vue mobile sur Chrome, mais je n’arrive toujours pas à l’afficher en mobile sur Firefox, Edge ou Brave.

Ai-je besoin de points de rupture (Viewport break points) dans tout mon code mobile ? Dois-je le placer dans la section Mobile ? La plupart de mes CSS mobiles ne sont que des changements de couleur, des icônes d’en-tête et la largeur de la barre latérale, des tailles d’emoji/police. Il ne semble donc pas que j’aie besoin de paramètres d’affichage spécifiques.

J’ai réussi à corriger le code dont j’avais besoin :

/* ==========================================================================\n   MENU DÉROULANT MOBILE - ÉTAT ACTIF\n   ========================================================================== */

/* 1. Forcer le texte du lien actif en noir */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
    color: #000000 !important;
}

/* 2. Retour tactile spécifique (Standard Discourse) */
html.discourse-touch {
    /* Rendre le texte noir pendant que le doigt appuie */
    .d-modal__body .dropdown-menu li a:active {
        color: #000000 !important;
    }

}

/* 3. Assurer que les autres éléments de navigation suivent la règle */
.dropdown-menu li a {
    transition: color 0.1s ease;
}