Gli auto margins devono ancora essere disattivati sui dispositivi mobili?

UX
1

Su mobile, i margini automatici per il wrapper main-outlet sono disattivati qui:

Questo causa l’allineamento a sinistra del layout quando -d-max-width è dichiarato su un tema. Non è visibile su dispositivi più stretti, ma sui tablet in modalità orizzontale è un problema, ad esempio qui con il tema Air:

Lo screenshot mostra una pagina del forum Discourse con un messaggio di benvenuto e un elenco di post della community. (Didascalia dell'IA)
Lo screenshot mostra una pagina del forum Discourse con un messaggio di benvenuto e un elenco di post della community. (Didascalia dell'IA)1746×1257 271 KB

Vedo che la dichiarazione è stata aggiunta a causa di:

Generalmente non vedo più il problema negli elenchi di argomenti, forse la dichiarazione può essere rimossa? Oppure, se ci sono casi specifici, dovrebbe essere assegnata a un breakpoint?

3 Mi Piace
2

Penso che probabilmente possiamo eliminare questa regola, sì. Potrebbe causare margini ampi su alcuni temi (specialmente temi personalizzati) su dispositivi mobili, ma la maggior parte dei temi dovrebbe andare bene.

Nota però che stai vedendo la visualizzazione mobile su tablet, che non è più l’impostazione predefinita per gli iPad; gli iPad utilizzano per impostazione predefinita la visualizzazione desktop e quindi non caricano gli stili per dispositivi mobili. Si tratta di un tablet Android?

3 Mi Piace
3

Sì, è un tablet Android.

2 Mi Piace
4

Sarei tentato di dire che l’impostazione predefinita di un user agent mobile sia la scelta sbagliata per un browser su tablet in modalità orizzontale (anche in modalità verticale, a dire il vero). Non sono sicuro se si tratti di Chrome o di un altro browser; Chrome in alcuni casi passa alla modalità desktop: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 Mi Piace
5

Posso riprodurlo sia sul tablet Android che su iPad, anche se è peggio su Android a causa del rapporto d’aspetto:

L'immagine mostra uno screenshot del sito web di Discourse con un messaggio di benvenuto e una sezione di offerte di lavoro. (Didascalia dell'IA)
L'immagine mostra uno screenshot del sito web di Discourse con un messaggio di benvenuto e una sezione di offerte di lavoro. (Didascalia dell'IA)1920×1200 208 KB

Modifica: In realtà questo problema non si verifica su iPad, ho provato e sembra a posto

2 Mi Piace
6

Un aspetto che mi piace della configurazione mobile è che il menu della barra laterale scorre come un overlay e non è incorporato nella pagina. Mi sembra più “nativo” su un dispositivo mobile.

Che ne dici di aggiungere semplicemente una dichiarazione di breakpoint?

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

Quindi, sui dispositivi mobili stretti, lo spazio extra potenziale viene rimosso, ma i dispositivi più larghi avrebbero il wrapper centrato.

3 Mi Piace
7

L’opzione breakpoint(mobile-extra-large) ha senso per me. Sono curioso anche di sapere cosa ne pensa @awesomerobot.

2 Mi Piace
8

Ho provato con una manciata di temi molto personalizzati e non penso che ne abbiamo più bisogno… qualche mese dopo che è stato aggiunto, il wrapper è stato impostato su grid con width: 100%;, quindi in teoria ciò dovrebbe impedire del tutto il verificarsi del problema originale

rimuovendolo qui

Grazie per aver indagato!

5 Mi Piace