Müssen Auto-Margins auf Mobilgeräten immer noch deaktiviert werden?

[manuel (Manuel Kostka)]

Auf Mobilgeräten werden die automatischen Ränder für den main-outlet-Wrapper hier aufgehoben:

app/assets/stylesheets/mobile/discourse.scss

Dies führt dazu, dass das Layout linksbündig ausgerichtet wird, wenn -d-max-width auf einem Theme deklariert wird. Auf schmaleren Geräten ist dies nicht sichtbar, aber auf Tablets im Querformat ist es ein Problem, z. B. hier mit dem Air-Theme:

Ich sehe, dass die Deklaration aufgrund von FIX: auto margins cause too-narrow content by awesomerobot · Pull Request #16725 · discourse/discourse · GitHub hinzugefügt wurde.

Ich sehe das Problem jetzt im Allgemeinen nicht mehr bei Themenlisten, vielleicht kann die Deklaration fallen gelassen werden? Oder, wenn es spezifische Fälle gibt, sollte sie besser für einen Breakpoint zugewiesen werden?

[pmusaraj (Penar Musaraj)]

Ich denke, wir können diese Regel wahrscheinlich fallen lassen, ja. Es könnte dazu führen, dass einige Themes (insbesondere benutzerdefinierte Themes) auf Mobilgeräten große Ränder haben, aber die meisten Themes sollten in Ordnung sein.

Beachten Sie jedoch, dass Sie die mobile Ansicht auf Tablets sehen, was für iPads nicht mehr der Standard ist. iPads verwenden standardmäßig die Desktop-Ansicht und laden daher keine mobilen Stylesheets. Ist das ein Android-Tablet?

[manuel (Manuel Kostka)]

Ja, das ist ein Android-Tablet.

[pmusaraj (Penar Musaraj)]

Ich bin versucht zu sagen, dass die Standardeinstellung auf einen mobilen User-Agent die falsche Wahl für einen Browser im Querformat auf einem Tablet ist (ehrlich gesagt, sogar im Hochformat). Ich bin mir nicht sicher, ob dies Chrome oder ein anderer Browser ist, Chrome stellt in einigen Fällen standardmäßig auf den Desktop-Modus um: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

[twofoursixeight]

Ich kann dies auf dem iPad und dem Android-Tablet reproduzieren, obwohl es auf Android dank des Seitenverhältnisses schlimmer ist:

Bearbeiten: Dieses Problem tritt tatsächlich nicht auf dem iPad auf, ich habe es versucht und es sieht gut aus

[manuel (Manuel Kostka)]

@pmusaraj

Ich bin versucht zu sagen, dass die Standardeinstellung auf einen mobilen User-Agent die falsche Wahl für einen Browser im Querformat auf einem Tablet ist (eigentlich sogar im Hochformat).

Ein Aspekt, der mir am mobilen Setup gefällt, ist, dass das Seitenleistenmenü als Überlagerung ein- und ausgeblendet wird und nicht auf der Seite eingebettet ist. Es fühlt sich für mich auf einem Mobilgerät “nativer” an.

Wie wäre es, einfach eine Breakpoint-Deklaration hinzuzufügen?

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

So wird auf schmalen Mobilgeräten der potenzielle zusätzliche Platz entfernt, aber breitere Geräte hätten den Wrapper zentriert.

[pmusaraj (Penar Musaraj)]

Die Option breakpoint(mobile-extra-large) ergibt für mich Sinn. Ich bin auch neugierig, was @awesomerobot hier denkt.

[awesomerobot (Kris)]

Ich habe es mit einer Handvoll sehr benutzerdefinierter Themes versucht und ich glaube nicht, dass wir es überhaupt noch brauchen… ein paar Monate, nachdem es hinzugefügt wurde, wurde der Wrapper auf Grid mit width: 100%; gesetzt, so dass das ursprünglich Problem theoretisch gar nicht mehr auftreten sollte.

Ich entferne es hier:

UX: remove main-outlet-wrapper margin reset for mobile

Danke für die Untersuchung!