タブレットでサイトが応答しません

こんにちは。
タブレットでサイトがレスポンシブでないことに気づきました。しかし、セーフモードでプラグインを無効にするとレスポンシブになります。私のウェブサイトには公式プラグインしかありません。

私のウェブサイトには以下のプラグインがあります。

この問題はmetaでは表示されません。metaがdiscourse-adpluginを使用していないからだと思います。

タブレットで見たウェブサイト:

広告ブロッカーを無効にするか、シークレットモードを使用すると、効果があるかどうかを確認できますか?

インコグニートモードでも同じ問題が発生しています。

新しいサイドバーに関連していると思われます。なぜなら、ハンバーガーメニューを使ってサイドバーを非表示にすると、サイトがレスポンシブになり、画面に完全に一致するからです。

「いいね!」 1

申し訳ありませんが、自分でテストするタブレットがないため、enable experimental sidebar hamburger および enable sidebar の管理設定でサイドバーを無効にしてみて、それが短期的に役立つかどうかを確認していただけますでしょうか。

「いいね!」 1

はい、サイドバーの設定を2つ無効にすると、サイトは再び応答性を取り戻し、画面に揃います。問題はサイドバーに関連しています。

こんにちは。

あなたのサイトで再現できます。原因は、トップ広告の幅が固定されていることだと思います。レスポンシブ広告タイプを選択することは可能でしょうか? :thinking: またはCSSで幅を設定することは可能でしょうか。おそらく、サイドバーとうまく連携するために、ディスコース広告の更新が必要かもしれません…それとも、広告に変更を加えていますか?

「いいね!」 1

iPad Proでこのように表示されています。\n\n設定を変更した後、再度試してみましょうか? :+1:\n\n[details="広告ブロッカー有効"]\n

\n\n\n[/details]\n\n\n[details="広告ブロッカー無効"]\n\n\n\n[/details]

「いいね!」 2

これを新しい、または既存のテーマコンポーネントに追加して、どのように機能するか確認してみてください。

デスクトップ / CSS

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

CSS を追加しました。これでメインサイトの問題はなくなりましたが、すべてのページで問題が発生しています。

広告には何も変更を加えていません。AdSense プラグインのトピックリストの上に固定サイズの広告を使用しています。

「いいね!」 1

設定を切り替えました。もう一度お試しいただけますでしょうか?

違いは特に見られませんが、キャッシュのせいでしょうか?

広告ブロッカー有効



広告ブロッカー無効



なるほど。問題は固定幅の広告にあると思います。たとえば、サイドバーが折りたたまれた状態でサイトを開き、その後サイドバーを開くと、フルサイズの広告も右に引き寄せられ、ページ全体をリフレッシュした後にのみ広告の幅が更新されます。

残念ながら、今すぐテストサイトで試すことはできません。

しかし、他の広告にも同様のことが機能する可能性があると想像できます。以前のコードを次のように変更してみてください。

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

以前のCSSを新しいものに変更しましたが、メインサイトではなく、すべてのページで同じ問題が発生しています。キャッシュをクリアしても同じです。

「いいね!」 1

申し訳ありませんが、現時点での最善のヒントはそれでしたが、少なくとも広告が原因であることがわかりました。将来の修正との競合を確実に避けるために、コードを削除できると思います。:slightly_smiling_face:

「いいね!」 1

ご協力ありがとうございます。この問題がすぐに解決されることを願っています。

「いいね!」 1

Metaもすべてのページで同じ問題を抱えていることがわかりました。

「いいね!」 1

こんにちは、ああ、再現できます。サイドバーが開いているトピックページで、790px未満の .loading-containermax-width が原因のようです。

.has-sidebar-page が利用可能な場合に、この計算に --d-sidebar-width をコアに追加すると良いのではないでしょうか?

しかし、その画面サイズではモバイル表示の方が良い体験ができると思います。

要約:

最新のページでは、トップ広告の固定幅が原因で、上記で言及したトピックページで発生します。

この簡単な修正で対応できるはずです。

デスクトップ / 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

ありがとうございます、ドン。これでサイトは応答性が高くなり、タブレットでも期待どおりに動作するようになりました。DiscourseのスタッフがMetaでもこのバグを修正してくれることを願っています。

「いいね!」 1