Site não responsivo no tablet

Olá,
Descobri que meu site não está responsivo no meu tablet. Mas ele fica responsivo se eu desativar os plugins no modo de segurança. Tenho apenas plugins oficiais no meu site.

Tenho os seguintes plugins no meu site:

O problema não é visível no meta. Acho que é porque o meta não está usando o discourse-adplugin.

Site como visto no tablet:

Você poderia tentar desativar seu bloqueador de anúncios ou usar um modo anônimo para ver se isso tem algum efeito?

Tendo o mesmo problema no modo anônimo também.

Suspeito que isso tenha algo a ver com a nova barra lateral, pois se eu usar o menu hambúrguer para ocultar a barra lateral, o site se torna responsivo e se alinha perfeitamente à tela.

1 curtida

Receio não ter um tablet para testar isso pessoalmente, mas você poderia tentar desativar a barra lateral usando as configurações de administrador enable experimental sidebar hamburger e enable sidebar e ver se isso ajuda no curto prazo:

1 curtida

Sim, se eu desabilitar as duas configurações da barra lateral, o site volta a ser responsivo e se alinha à tela. O problema está relacionado à barra lateral.

Olá,

Consigo reproduzir o problema no seu site. Acho que a causa é que os anúncios superiores têm largura fixa. Não tenho certeza se é possível selecionar um tipo de anúncio responsivo? :thinking: ou torná-lo com largura CSS. Provavelmente os anúncios do Discourse precisam de alguma atualização para funcionar melhor com a barra lateral… ou você tem alguma modificação nos anúncios?

1 curtida

É isso que estou vendo no meu iPad Pro, a propósito.

Me avise se você gostaria que eu tentasse novamente depois que você alternar alguma configuração. :+1:

Bloqueadores de anúncios ativos



Bloqueadores de anúncios inativos



2 curtidas

Você pode tentar adicionar isso a um componente de tema novo ou existente para verificar como isso funciona?

Desktop / CSS

@media screen and (max-width: 1000px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
  }
}
2 curtidas

Adicionei o CSS. Agora não tenho o problema no site principal, mas tenho o problema em todas as páginas.

Não fiz nenhuma modificação nos anúncios. Estou usando anúncios de tamanho fixo acima da lista de tópicos no plugin do AdSense.

1 curtida

Eu alterei as configurações. Você pode tentar mais uma vez, por favor??

Não notando nenhuma diferença óbvia, talvez devido ao cache?

Adblockers ativos



Adblockers inativos



Entendi. Acho que o problema está com os anúncios de largura fixa. Por exemplo, se você abrir o site com a barra lateral recolhida e depois abri-la, ela empurrará os anúncios de tamanho normal para a direita e só atualizará a largura do anúncio após uma atualização completa da página.

Infelizmente, não posso testar isso agora no meu site de teste.

Mas posso imaginar que algo assim pode funcionar para os outros anúncios também. Você pode tentar alterar o código anterior para este?

@media screen and (max-width: 1110px) {
  .google-adsense .google-adsense-content {
    width: 100% !important;
    .adsbygoogle {
      width: 100% !important;
      > div {
        width: 100% !important;
      }
    }
  }
}
1 curtida

Eu alterei o CSS anterior pelo novo. Mas ainda estou tendo o mesmo problema em todas as páginas, mas não no site principal. Eu também tentei limpar o cache, mas o mesmo.

1 curtida

Desculpe, essa foi a minha melhor dica por enquanto, mas pelo menos agora sabemos que os anúncios causam isso. Acho que você pode remover o código para ter certeza de que não haverá conflito com a correção futura. :slightly_smiling_face:

1 curtida

Obrigado pela ajuda. Espero que alguém resolva este problema em breve.

1 curtida

Descobri que a Meta também tem o mesmo problema em todas as páginas.

1 curtida

Olá, Ah sim, consigo reproduzir. Parece que a max-width do .loading-container inferior, abaixo de 790px, causa isso com a barra lateral aberta em páginas de tópicos.

Provavelmente seria bom adicionar ao núcleo a --d-sidebar-width a este cálculo quando .has-sidebar-page estiver disponível?

Mas acho que você terá uma experiência melhor nesse tamanho de tela na visualização móvel.

Resumo:

Na página mais recente, o anúncio superior de largura fixa causa isso e nas páginas de tópicos que mencionei acima.

Este rápido conserto deve funcionar para você.

Desktop / CSS

.google-adsense .google-adsense-content {
  max-width: 100%;
  .adsbygoogle {
    max-width: 100%;
    > div {
      max-width: 100%;
    }
  }
}

@media all and (max-width: 790px) {
  body.has-sidebar-page {
    .topic-area > .loading-container {
      max-width: calc(100vw - var(--d-sidebar-width) - 32px);
    }
  }
}
2 curtidas

Obrigado, Don. Agora o site está responsivo e funcionando como esperado no meu tablet. Espero que a equipe do Discourse corrija esse bug no meta também.

1 curtida