Sito non reattivo su tablet

Ciao,
Ho scoperto che il mio sito non è responsive sul mio tablet. Ma è responsive se disabilito i plugin in modalità provvisoria. Ho solo plugin ufficiali sul mio sito web.

Ho i seguenti plugin sul mio sito web:

Il problema non è visibile su meta. Penso che sia perché meta non utilizza discourse-adplugin.

Sito web visto sul tablet:

Potresti provare a disabilitare il tuo adblocker o utilizzare una modalità in incognito per vedere se ciò ha un effetto?

Ho lo stesso problema anche in modalità di navigazione in incognito.

Sospetto che abbia a che fare con la nuova barra laterale, perché se uso il menu hamburger per nascondere la barra laterale, il sito diventa reattivo e si allinea perfettamente allo schermo.

1 Mi Piace

Mi dispiace, non ho un tablet per testarlo personalmente, ma potresti provare a disabilitare la barra laterale utilizzando le impostazioni di amministrazione enable experimental sidebar hamburger e enable sidebar e vedere se questo aiuta nel breve termine:

1 Mi Piace

Sì, se disabilito le due impostazioni della barra laterale, il sito diventa nuovamente reattivo e si allinea allo schermo. Il problema è correlato alla barra laterale.

Ciao,

Posso riprodurlo sul tuo sito. Penso che sia dovuto al fatto che gli annunci in alto hanno una larghezza fissa. Non sono sicuro che sia possibile selezionare un tipo di annuncio reattivo? :thinking: o renderlo con larghezza CSS. Probabilmente gli annunci di discourse necessitano di un aggiornamento per funzionare meglio con la barra laterale… o hai apportato modifiche agli annunci?

1 Mi Piace

Questa è la schermata che vedo sul mio iPad Pro, a titolo informativo.

Fammi sapere se desideri che riprovi dopo aver modificato qualche impostazione. :+1:

Adblock attivi



Adblock disattivati



2 Mi Piace

Puoi provare ad aggiungerlo a un nuovo componente del tema o a uno esistente per verificare come funziona?

Desktop / CSS

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

Ho aggiunto il CSS. Ora non ho più il problema sul sito principale, ma ho il problema su tutte le pagine.

Non ho apportato modifiche agli annunci. Sto utilizzando annunci di dimensioni fisse sopra l’elenco degli argomenti nel plug-in AdSense.

1 Mi Piace

Ho attivato le impostazioni. Puoi riprovare ancora una volta??

Non noto differenze evidenti, forse a causa della cache?

Adblocker attivi



Adblocker inattivi



Capisco. Penso che il problema sia con gli annunci a larghezza fissa. Ad esempio, se apri il sito con la barra laterale collassata e poi la apri, questa sposterà anche gli annunci a grandezza naturale verso destra e aggiornerà la larghezza dell’annuncio solo dopo un aggiornamento completo della pagina.

Sfortunatamente, non posso provarlo ora sul mio sito di test.

Ma posso immaginare che qualcosa del genere possa funzionare anche per gli altri annunci. Puoi provare a modificare il codice precedente in questo modo?

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

Ho modificato il CSS precedente con quello nuovo. Ma ho ancora lo stesso problema su tutte le pagine, ma non sul sito principale. Ho anche provato a cancellare la cache, ma niente.

1 Mi Piace

Mi dispiace, ma al momento questo è il mio miglior suggerimento, ma almeno ora sappiamo che gli annunci causano questo. Penso che tu possa rimuovere il codice per essere sicuro di non creare conflitti con la correzione futura. :slightly_smiling_face:

1 Mi Piace

Grazie per l’aiuto. Spero che qualcuno risolva presto questo problema.

1 Mi Piace

Ho scoperto che anche Meta ha lo stesso problema su tutte le pagine.

1 Mi Piace

Ciao, Oh sì, posso riprodurlo. Sembra che il max-width del .loading-container in basso sotto i 790px causi questo con la barra laterale aperta nelle pagine degli argomenti.

Probabilmente sarebbe bene aggiungere al core il --d-sidebar-width a questo calcolo quando .has-sidebar-page è disponibile?

Ma penso che avrai un’esperienza migliore su quella dimensione dello schermo in visualizzazione mobile.

Riassumere:

Nella pagina più recente, l’annuncio in alto con larghezza fissa causa questo e nelle pagine degli argomenti che ho menzionato sopra.

Questa rapida correzione dovrebbe funzionare per te.

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 Mi Piace

Grazie, Don. Ora il sito è reattivo e funziona come previsto sul mio tablet. Spero che lo staff di Discourse risolva anche questo bug su meta.

1 Mi Piace