¿Todavía es necesario desactivar los márgenes automáticos en móviles?

UX
1

En dispositivos móviles, los márgenes automáticos para el contenedor main-outlet no se establecen aquí:

Esto hace que el diseño se alinee a la izquierda cuando se declara -d-max-width en un tema. No es visible en dispositivos más estrechos, pero en tabletas en modo horizontal es un problema, por ejemplo, aquí con el tema Air:

La imagen es una captura de pantalla de una página del foro de Discourse que muestra un mensaje de bienvenida y una lista de publicaciones de la comunidad. (Subtitulado por IA)
La imagen es una captura de pantalla de una página del foro de Discourse que muestra un mensaje de bienvenida y una lista de publicaciones de la comunidad. (Subtitulado por IA)1746×1257 271 KB

Veo que la declaración se añadió debido a:

En general, ya no veo el problema en las listas de temas, ¿quizás la declaración se pueda eliminar? O, si hay algunos casos específicos, ¿sería mejor asignarla a un punto de interrupción?

3 Me gusta
2

Creo que probablemente podamos eliminar esta regla, sí. Podría causar que algunos temas (especialmente temas personalizados) tengan márgenes grandes en dispositivos móviles, pero la mayoría de los temas deberían estar bien.

Sin embargo, ten en cuenta que estás viendo la vista móvil en una tableta, lo cual ya no es el valor predeterminado para los iPads. Los iPads usan la vista de escritorio de forma predeterminada y, por lo tanto, no cargan las hojas de estilo móviles. ¿Es esta una tableta Android?

3 Me gusta
3

Sí, esa es una tableta Android.

2 Me gusta
4

Me tienta decir que la opción predeterminada de un agente de usuario móvil es la elección incorrecta para un navegador en modo horizontal en una tableta (incluso en modo vertical, para ser sincero). No estoy seguro de si esto es Chrome u otro navegador; Chrome en algunos casos utiliza el modo de escritorio de forma predeterminada: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 me gusta
5

Puedo reproducir esto en la tablet Android, aunque es peor en Android gracias a la relación de aspecto:

The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)
The image shows a screenshot of the Discourse website with a welcome message and job listings section. (Captioned by AI)1920×1200 208 KB

Editar: En realidad, este problema no ocurre en el iPad, lo intenté y se ve bien.

2 Me gusta
6

Un aspecto que me gusta de la configuración móvil es que el menú de la barra lateral aparece como una superposición y no incrustado en la página. Me parece más “nativo” en un dispositivo móvil.

¿Qué tal si simplemente agregamos una declaración de punto de interrupción?

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

Así, en dispositivos móviles estrechos, se elimina el posible espacio adicional, pero los dispositivos más anchos tendrían el contenedor centrado.

3 Me gusta
7

La opción breakpoint(mobile-extra-large) tiene sentido para mí. También tengo curiosidad por saber qué piensa @awesomerobot aquí.

2 Me gusta
8

Lo probé con un puñado de temas muy personalizados y creo que ya no lo necesitamos en absoluto… unos meses después de que se agregara, el contenedor se estableció en grid con width: 100%;, por lo que en teoría eso debería evitar que el problema original ocurra en absoluto

eliminándolo aquí

¡Gracias por investigar!

5 Me gusta