vdo/vmo のブレークポイントを変更する

当社のデザイナーがこの(非常に素晴らしく便利な)アドオンのレスポンシブ対応についていくつか問題を抱えており、現在 vdo から vmo 要素へ切り替わるブレイクポイントを変更できるか尋ねています。

これは可能でしょうか?よろしくお願いいたします。

はい。フォークしてテーマコンポーネントを編集するだけです。

ありがとうございます、確認しましたがそこには見つかりませんでした…おそらく、そのメニューだけでなくサイト全体に適用されるDiscourseの設定に依存しているのでしょう?

とにかく、CSSメディアクエリで動作するようにしました。完璧ではありませんが、これで問題ありません。

vdo(デスクトップのみ表示)から vmo(モバイルのみ表示)への切り替えは、使用するブラウザのユーザーエージェントに基づいて行われ、ビューポートの幅やシミュレーションされた幅には依存しません。

CSS メディアクエリは、Discourse では他のサイトに慣れている方々が思っているほど重要ではありません。

Discourse は、ユーザーが使用しているデバイスに基づいて、最適化された異なるマークアップを提供します。

言いたいのは、CSS メディアクエリについてあまり気にする必要はないということです。デザイナーの方は、テストしている URL に ?mobile_view=1 を追加するか、デスクトップでテストやデバッグを行う際にモバイルユーザーエージェントを使用する必要があります。

興味深い :thinking: 丁寧に説明してくださりありがとうございます。

ただ、デスクトップでブラウザのウィンドウサイズを変えてみると、Discourse が反応して画面内の要素を再配置しているのが見えます。これはおそらくユーザーエージェント文字列から来ているものではないでしょう。画面サイズに反応する別の仕組みがあるのでしょうか?

例えば、右側のタイムラプス・スクロールバーは幅が狭くなると消え、代わりにポスト番号と総数だけをあらわす小さなインジケーター(例:19 / 24)に置き換わります。

その通りです。

Discourse はウィンドウサイズを十分に小さくすると、要素を移動させます。これは、さまざまなデスクトップやラップトップの画面サイズに対応するために行っています。

ただし、それが今回の本題ではありません。ビューポートを縮小させても、ユーザーエージェントの変更は発生しません。ユーザーエージェントは使用するデバイスのものに基づいて完全に決定されるためです。

デスクトップでウィンドウや画面幅を変更すると、Discourse は可能な限りそれに適応します。

しかし、デスクトップ上でモバイル時の Discourse の表示を確認したい場合は、以下のいずれかを行う必要があります。

前述したように、

あるいは、実際にモバイルデバイスでテストしてください。