こんにちは、stableから最新のesrに移行したのですが、明示的に切り替え可能なモバイル/デスクトップレイアウトがなくなったようです。サイドバーの左下隅にあった切り替えトグルが見当たらなくなり、?mobile_view=1 / ?mobile_view=0も効果がなくなりました。デスクトップブラウザウィンドウを水平にリサイズするだけで、サイドバーと左側にハンバーガーメニューがあるデスクトップモードから、サイドバーがなく右側にメニューがあるモバイルレイアウトに切り替わるようになりました。つまり、今はブラウザの幅に基づいているだけなのでしょうか？以前は、必要に応じてより広いタブレット画面で簡略化されたモバイルレイアウトを使用したり、あるいは、それを好むユーザーのために、より小さなスマートフォンや狭いブラウザウィンドウで（例えばトピックリストにより多くの詳細が表示される）デスクトップモードを使用したりすることが可能でした。
「いいね！」 2
その通りです。より広く受け入れられているデザイン標準である幅ベースのブレークポイントを使用するために、レイアウトを単純化し、適切に応答するように移行しています。また、保守が容易であること、そして幅ベースのレイアウトは、メインサイトとフォーラム間で共有バナーを統合する場合など、他の外部デザイン要素ともうまく機能することを発見しました。
「いいね！」 5
このアプローチの欠点の一つは、初期化子でデバイス固有のロジックを実行できないことです。
典型的な例は、モバイルとデスクトップで異なるホームページを設定することですが、これは現在できません。
私の意見では、これはテンプレートの作成方法に対して、より動的なアプローチを必要とするでしょう。
「いいね！」 3
返信ありがとうございます。原則としてそれは理にかなっていますが、より高度な/頻繁なユーザーにとっては実際には少し問題になります。前述したように、縮小レイアウトモードではトピックリストに表示される情報がはるかに少なくなり、特にhttps://meta.discourse.org/t/sams-simple-theme/23552のようなものを使用する場合、一部のユーザーはデスクトップレイアウトを明示的に強制することを好み、それでもオーバーフローせずに水平方向に適合するように正しく適応していました。
「いいね！」 2
新しいメソッドで削除した、これを行うことには制限があります。初期化時に機能を判断するのはかなり柔軟性に欠け、何かが変更された場合、ページ全体をリロードする必要があります。
これは、デバイスが現在予測不可能になっているため便利です。スマートフォンは折りたたんでタブレットになる可能性があり、ラップトップはタブレットに変換でき、非常に多くのものにキーボードとマウスを接続できます…
古い方法に慣れていると違って感じるかもしれませんが、初期化子で行っていたことは、おそらくまだ可能であり、かつ変化する機能により応答性が高くなっています。
現在では、より粒度が細かくなり、テンプレート全体を入れ替えるのではなく、同じテンプレート内で条件付きでコンテンツを表示/非表示にすることで、それが可能になりました。たとえば、現在、機能サービスにビューポートオブジェクトがあります…
テンプレート内では…
{{#if this.capabilities.viewport.lg}}
大きな画面用のコンテンツ
{{/if}}
{{#if this.capabilities.viewport.sm}}
非常に小さな画面用のコンテンツ
{{/if}}
またはJavaScriptでは…
get myContent() {
if (this.capabilities.viewport.sm) {
return "短いコンテンツ";
} else {
return "非常に非常に長いコンテンツ"
}
}
そしてCSSでは、次のように同じブレークポイントで調整できます…
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}
「いいね！」 8
承知いたしました。これらの置換については認識しています。
しかし、このようなパターンがより根本的に使用されるのを見るのを楽しみにしています。
例えば、ホームページがデスクトップで「カテゴリー」の場合、トピックリストが表示されます。
トピックリストはモバイルでも表示されるべきです… 現在はトピックリストの要素が失われています。
これが「モバイルホームページを強制する」TCが存在した理由です…
私の言いたいことが伝わっているといいのですが…
「いいね！」 4
ええ、理にかなっています。そのような変更を徐々に加えていくと思いますが、古い方法で多くのものを構築しており、カスタマイズをすぐに壊さないようにサポートする必要があるため、それは難しいことです。
「いいね！」 5
残念ながら、簡略化されたモバイルレイアウトを非常に嫌うユーザーがいるため、このトピックについてもう少し続ける必要があります。これは特に、縦向きのタブレットユーザーによく当てはまるようです。
それで、具体的に何が変更されたのか、まだ少し混乱しています。:desktop_computer: / :mobile_phone: の切り替えがサイドバーから削除されただけですか？同じ JavaScript メソッドをカスタムスクリプトなどで呼び出すことはまだ可能ですか？それとも、デスクトップレイアウトのコードに変更があり、ブラウザの幅が狭くなってもレスポンシブに適応しなくなるのでしょうか？
（Android タブレットの Chrome と Firefox でテストしたところ）ブラウザの「デスクトップ サイト」トグルは、以前の Discourse 独自の :desktop_computer: / :mobile_phone: トグルに対応していた古いレイアウトを強制的に表示し、オーバーフローすることなくレスポンシブに適応し続けることがわかりました。しかし、テキストは以前記憶していたよりもずっと小さく見えます。
また、特定の幅のブレークポイント（例：@media screen and (max-width: 1000px) {…）を選択する方法は知っていますが、CSS オーバーライドで何かできることがあるのかどうかはわかりません。
「いいね！」 1
これには同意します。携帯電話でのモバイルレイアウトは、あまりにも窮屈で、ズームを半分にしないとすべてが大きすぎると感じていました。私はいつもここでデスクトップレイアウトを使用していましたが、もうできなくなりました。
1つのレイアウトを維持し、切り替えを心配しないことのシンプルさは理解できますが、選択肢があるのは時として良いものです。
「いいね！」 1
いいえ、サイドバーから削除されただけではありません。切り替えの基盤となる構造を削除しました。
「いいね！」 3
Force Mobile Homepage は broken としてタグ付けされるべきということですか？
「いいね！」 1
それを壊れているとマークしました。
その理由は次のとおりです。
「いいね！」 2
モバイルブラウザの「デスクトップサイト」トグルをユーザーに推奨するしかないのでしょうか、それとも、通常のタブレットの垂直幅で簡略化されたモバイルレイアウトに戻るのを強制しないように、CSSで次のようなものを使用できますか？@media screen and (max-width: 700px) {…
「デスクトップをリクエスト」と、https://meta.discourse.org/my/preferences/interface でフォントサイズを大きくすることを組み合わせてテストしてもらえるでしょうか？
こんにちは、ご返信ありがとうございます。
あるユーザーがブラウザの「デスクトップサイト」トグルを試しましたが、何も変わらなかったと報告しています。私のタブレットでは、フル情報のデスクトップレイアウトに切り替わりますが、「最大」に設定してもテキストはかろうじて読める程度で、同じアカウントを使用するPCなどの他のデバイスではテキストが大きくなりすぎるため、ユーザー設定で変更するのは理想的ではありません。
「いいね！」 2
「標準」が現在のデフォルトだと思いますが、他に何か選択してみましたか？
「いいね！」 2
ああ、なるほど。;-）ありがとう、少しは役に立ったかな。
正直、小さな縦長の画面での古い明示的なデスクトップモードでのフォントサイズのスケーリングがどのように機能していたか覚えていないけど、全体的にもっと大きかったような気がする。 「最大」設定のためにCSSの上書きを追加する必要があるかもしれない…
「いいね！」 1