Ainda é necessário desmarcar as margens automáticas no celular?

Experiência do Usuário
1

Em dispositivos móveis, as margens automáticas para o wrapper main-outlet são desdefinidas aqui:

Isso faz com que o layout seja alinhado à esquerda quando -d-max-width é declarado em um tema. Não é visível em dispositivos mais estreitos, mas em tablets no modo paisagem é um problema, por exemplo, aqui com o tema Air:

A imagem é uma captura de tela de uma página de fórum Discourse exibindo uma mensagem de boas-vindas e uma lista de posts da comunidade. (Legenda por IA)
A imagem é uma captura de tela de uma página de fórum Discourse exibindo uma mensagem de boas-vindas e uma lista de posts da comunidade. (Legenda por IA)1746×1257 271 KB

Vejo que a declaração foi adicionada por causa de

Geralmente não vejo mais o problema nas listas de tópicos, talvez a declaração possa ser removida? Ou, se houver alguns casos específicos, ser atribuída a um ponto de interrupção?

3 curtidas
2

Acho que podemos provavelmente remover esta regra, sim. Isso pode causar margens grandes em alguns temas (especialmente temas personalizados) no celular, mas a maioria dos temas deve ficar bem.

Note, porém, que você está vendo a visualização do celular em um tablet, que não é mais o padrão para iPads. iPads usam a visualização do desktop por padrão e, portanto, não carregam folhas de estilo do celular. Isso é um tablet Android?

3 curtidas
3

Sim, isso é um tablet Android.

2 curtidas
4

Estou tentado a dizer que usar o user agent de um dispositivo móvel como padrão é a escolha errada para um navegador em modo paisagem em um tablet (mesmo em modo retrato, para ser sincero). Não tenho certeza se este é o Chrome ou outro navegador; o Chrome, em alguns casos, usa o modo desktop como padrão: Chrome enables desktop mode by default on premium tablets  |  Blog  |  Chrome for Developers

1 curtida
5

Consigo reproduzir isso em ambos os iPads e no tablet Android, embora seja pior no Android graças à proporção de tela:

A imagem mostra uma captura de tela do site Discourse com uma mensagem de boas-vindas e uma seção de listagens de empregos. (Legenda da IA)
A imagem mostra uma captura de tela do site Discourse com uma mensagem de boas-vindas e uma seção de listagens de empregos. (Legenda da IA)1920×1200 208 KB

Editar: Na verdade, este problema não ocorre no iPad, tentei e parece bom

2 curtidas
6

Um aspecto que gosto na configuração móvel é que o menu da barra lateral desliza como uma sobreposição e não fica embutido na página. Para mim, parece mais “nativo” em um dispositivo móvel.

Que tal apenas adicionar uma declaração de breakpoint?

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

Assim, em dispositivos móveis estreitos, o espaço extra potencial é removido, mas dispositivos mais largos teriam o wrapper centralizado.

3 curtidas
7

A opção breakpoint(mobile-extra-large) faz sentido para mim. Gostaria de saber também o que @awesomerobot pensa sobre isso.

2 curtidas
8

Tentei com alguns temas muito personalizados e acho que não precisamos mais disso… alguns meses depois de ter sido adicionado, o wrapper foi definido como grid com width: 100%;, então, em teoria, isso deve impedir que o problema original aconteça.

removendo aqui

Obrigado por investigar!

5 curtidas