Faut-il encore supprimer les marges automatiques sur mobile ?

UX
1

Sur mobile, les marges automatiques pour le wrapper main-outlet sont désactivées ici :

Cela provoque un alignement à gauche de la mise en page lorsque -d-max-width est déclaré sur un thème. Ce n’est pas visible sur les appareils plus étroits, mais sur les tablettes en mode paysage, c’est un problème, par exemple ici avec le thème Air :

L'image est une capture d'écran d'une page de forum Discourse affichant un message de bienvenue et une liste de publications communautaires. (Légendé par l'IA)
L'image est une capture d'écran d'une page de forum Discourse affichant un message de bienvenue et une liste de publications communautaires. (Légendé par l'IA)1746×1257 271 KB

Je vois que la déclaration a été ajoutée à cause de :

Je ne vois généralement plus le problème sur les listes de sujets, peut-être que la déclaration peut être supprimée ? Ou, s’il y a des cas spécifiques, être plutôt assignée à un point d’arrêt ?

3 « J'aime »
2

Je pense que nous pouvons probablement abandonner cette règle, oui. Cela pourrait causer de grandes marges sur mobile pour certains thèmes (en particulier les thèmes personnalisés), mais la plupart des thèmes devraient être corrects.

Notez cependant que vous voyez la vue mobile sur tablette, ce qui n’est plus le défaut pour les iPads, les iPads utilisent par défaut la vue bureau et par conséquent ils ne chargent pas les feuilles de style mobiles. S’agit-il d’une tablette Android ?

3 « J'aime »
3

Oui, c’est une tablette Android.

2 « J'aime »
4

Je suis tenté de dire que le choix par défaut d’un agent utilisateur mobile est le mauvais choix pour un navigateur en mode paysage sur tablette (même en mode portrait, honnêtement). Je ne suis pas sûr s’il s’agit de Chrome ou d’un autre navigateur, Chrome dans certains cas utilise par défaut le mode bureau : Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 « J'aime »
5

Je peux reproduire cela sur l’iPad et la tablette Android, bien que ce soit pire sur Android à cause du rapport d’aspect :

L'image montre une capture d'écran du site Web Discourse avec un message de bienvenue et une section d'offres d'emploi. (Légendé par l'IA)
L'image montre une capture d'écran du site Web Discourse avec un message de bienvenue et une section d'offres d'emploi. (Légendé par l'IA)1920×1200 208 KB

Edit : Ce problème ne se produit en fait pas sur iPad, j’ai essayé et cela semble correct

2 « J'aime »
6

Un aspect que j’aime dans la configuration mobile, c’est que le menu de la barre latérale apparaît en superposition et n’est pas intégré à la page. Cela me semble plus « natif » sur un appareil mobile.

Que diriez-vous d’ajouter simplement une déclaration de point d’arrêt ?

@include breakpoint(mobile-extra-large) {
  #main-outlet-wrapper {
    margin-left: unset;
    margin-right: unset;
  }
}

Ainsi, sur les appareils mobiles étroits, l’espace supplémentaire potentiel est supprimé, mais les appareils plus larges auraient l’enveloppe centrée.

3 « J'aime »
7

L’option breakpoint(mobile-extra-large) me semble logique. Je suis également curieux de savoir ce qu’en pense @awesomerobot.

2 « J'aime »
8

J’ai essayé avec une poignée de thèmes très personnalisés et je ne pense pas que nous en ayons encore besoin… quelques mois après son ajout, le wrapper a été défini sur grid avec width: 100%;, donc en théorie, cela devrait empêcher le problème d’origine de se produire.

Suppression ici

Merci pour votre enquête !

5 « J'aime »