モバイル/デスクトップレイアウトの切り替えはもうできなくなりますか?

こんにちは、stableから最新のesrに移行したのですが、明示的に切り替え可能なモバイル/デスクトップレイアウトがなくなったようです。サイドバーの左下隅にあった切り替えトグルが見当たらなくなり、?mobile_view=1 / ?mobile_view=0も効果がなくなりました。デスクトップブラウザウィンドウを水平にリサイズするだけで、サイドバーと左側にハンバーガーメニューがあるデスクトップモードから、サイドバーがなく右側にメニューがあるモバイルレイアウトに切り替わるようになりました。つまり、今はブラウザの幅に基づいているだけなのでしょうか?以前は、必要に応じてより広いタブレット画面で簡略化されたモバイルレイアウトを使用したり、あるいは、それを好むユーザーのために、より小さなスマートフォンや狭いブラウザウィンドウで(例えばトピックリストにより多くの詳細が表示される)デスクトップモードを使用したりすることが可能でした。

「いいね!」 1

その通りです。より広く受け入れられているデザイン標準である幅ベースのブレークポイントを使用するために、レイアウトを単純化し、適切に応答するように移行しています。また、保守が容易であること、そして幅ベースのレイアウトは、メインサイトとフォーラム間で共有バナーを統合する場合など、他の外部デザイン要素ともうまく機能することを発見しました。

「いいね!」 5

このアプローチの欠点の一つは、初期化子でデバイス固有のロジックを実行できないことです。

典型的な例は、モバイルとデスクトップで異なるホームページを設定することですが、これは現在できません。

私の意見では、これはテンプレートの作成方法に対して、より動的なアプローチを必要とするでしょう。

「いいね!」 2

返信ありがとうございます。原則としてそれは理にかなっていますが、より高度な/頻繁なユーザーにとっては実際には少し問題になります。前述したように、縮小レイアウトモードではトピックリストに表示される情報がはるかに少なくなり、特に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;
  } 
}
「いいね!」 6

承知いたしました。これらの置換については認識しています。

しかし、このようなパターンがより根本的に使用されるのを見るのを楽しみにしています。

例えば、ホームページがデスクトップで「カテゴリー」の場合、トピックリストが表示されます。

トピックリストはモバイルでも表示されるべきです… 現在はトピックリストの要素が失われています。

これが「モバイルホームページを強制する」TCが存在した理由です…

私の言いたいことが伝わっているといいのですが…

「いいね!」 3

ええ、理にかなっています。そのような変更を徐々に加えていくと思いますが、古い方法で多くのものを構築しており、カスタマイズをすぐに壊さないようにサポートする必要があるため、それは難しいことです。

「いいね!」 3