Site non réactif sur tablette

Salut,
J’ai constaté que mon site n’est pas responsive sur ma tablette. Mais il est responsive si je désactive les plugins en mode sans échec. J’ai uniquement des plugins officiels sur mon site web.

J’ai les plugins suivants sur mon site web :

Le problème n’est pas visible sur meta. Je pense que c’est parce que meta n’utilise pas le discourse-adplugin.

Site web tel qu’il apparaît sur la tablette :

Pourriez-vous essayer de désactiver votre bloqueur de publicités ou d’utiliser un mode de navigation privée pour voir si cela a un effet ?

J’ai le même problème en mode incognito également.

Je soupçonne que cela a quelque chose à voir avec la nouvelle barre latérale, car si j’utilise le menu hamburger pour masquer la barre latérale, le site devient réactif et s’aligne parfaitement sur l’écran.

1 « J'aime »

Je crains de ne pas avoir de tablette pour tester cela moi-même, mais pourriez-vous essayer de désactiver la barre latérale en utilisant les paramètres d’administration enable experimental sidebar hamburger et enable sidebar et voir si cela aide à court terme :

1 « J'aime »

Oui, si je désactive les deux paramètres de la barre latérale, le site redevient réactif et s’aligne sur l’écran. Le problème est lié à la barre latérale.

Bonjour,

Je peux le reproduire sur votre site. Je pense que cela est dû au fait que les publicités du haut ont une largeur fixe. Je ne suis pas sûr qu’il soit possible de sélectionner un type d’annonce réactif ? :thinking: ou de lui donner une largeur CSS. Probablement que les publicités de Discourse ont besoin d’une mise à jour pour mieux fonctionner avec la barre latérale… ou avez-vous apporté des modifications aux publicités ?

1 « J'aime »

Voici ce que je vois sur mon iPad Pro, pour information.

Faites-moi savoir si vous souhaitez que je réessaie après avoir modifié des paramètres. :+1:

Bloqueurs de publicités actifs



Bloqueurs de publicités inactifs



2 « J'aime »

Pouvez-vous essayer d’ajouter ceci à un nouveau composant de thème ou à un composant existant pour vérifier comment cela fonctionne ?

Bureau / CSS

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

J’ai ajouté le CSS. Je n’ai plus le problème sur le site principal, mais je l’ai sur toutes les pages.

Je n’ai apporté aucune modification aux annonces. J’utilise des annonces de taille fixe au-dessus de la liste des sujets dans le plugin AdSense.

1 « J'aime »

J’ai activé les paramètres. Pouvez-vous réessayer ??

Je ne remarque aucune différence évidente, peut-être à cause de la mise en cache ?

Bloqueurs de publicité actifs



Bloqueurs de publicité inactifs



Je vois. Je pense que le problème vient des annonces à largeur fixe. Par exemple, si vous ouvrez le site avec la barre latérale réduite, puis que vous ouvrez la barre latérale, les annonces pleine taille seront également déplacées vers la droite et la largeur de l’annonce ne sera mise à jour qu’après un rafraîchissement complet de la page.

Malheureusement, je ne peux pas l’essayer maintenant sur mon site de test.

Mais je peux imaginer que quelque chose comme ceci pourrait fonctionner pour les autres annonces également. Pouvez-vous essayer de modifier le code précédent pour obtenir ceci ?

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

J’ai remplacé le CSS précédent par le nouveau. Mais j’ai toujours le même problème sur toutes les pages, sauf sur le site principal. J’ai aussi essayé de vider le cache, mais sans succès.

1 « J'aime »

Désolé, c’était mon meilleur conseil pour l’instant, mais au moins nous savons maintenant que les publicités en sont la cause. Je pense que vous pouvez supprimer le code pour être sûr de ne pas entrer en conflit avec la correction future. :slightly_smiling_face:

1 « J'aime »

Merci pour votre aide. J’espère que quelqu’un résoudra ce problème bientôt.

1 « J'aime »

J’ai constaté que Meta rencontre également le même problème sur toutes les pages.

1 « J'aime »

Bonjour, Oh oui, je peux le reproduire. Il semble que la largeur maximale de .loading-container en dessous de 790px en soit la cause avec la barre latérale ouverte sur les pages de sujets.

Probablement, il serait bon d’ajouter --d-sidebar-width au calcul de base lorsque .has-sidebar-page est disponible ?

Mais je pense que vous aurez une meilleure expérience sur cette taille d’écran en mode mobile.

Résumé :

Sur la dernière page, la largeur fixe de la publicité supérieure en est la cause et sur les pages de sujets que j’ai mentionnées ci-dessus.

Cette correction rapide devrait fonctionner pour vous.

Bureau / 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 « J'aime »

Merci, Don. Le site est maintenant réactif et fonctionne comme prévu sur ma tablette. J’espère que le personnel de Discourse corrigera également ce bug sur meta.

1 « J'aime »