新しいメソッドで削除した、これを行うことには制限があります。初期化時に機能を判断するのはかなり柔軟性に欠け、何かが変更された場合、ページ全体をリロードする必要があります。
これは、デバイスが現在予測不可能になっているため便利です。スマートフォンは折りたたんでタブレットになる可能性があり、ラップトップはタブレットに変換でき、非常に多くのものにキーボードとマウスを接続できます…
古い方法に慣れていると違って感じるかもしれませんが、初期化子で行っていたことは、おそらくまだ可能であり、かつ変化する機能により応答性が高くなっています。
現在では、より粒度が細かくなり、テンプレート全体を入れ替えるのではなく、同じテンプレート内で条件付きでコンテンツを表示/非表示にすることで、それが可能になりました。たとえば、現在、機能サービスにビューポートオブジェクトがあります…
テンプレート内では…
{{#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;
}
}