Dem sind Grenzen gesetzt, die wir mit neuen Methoden beseitigt haben – die Bestimmung von Fähigkeiten bei der Initialisierung ist ziemlich unflexibel; wenn sich etwas ändert, müssten wir die gesamte Seite neu laden.
Das ist nützlich, da Geräte heute weniger vorhersehbar sind: Telefone können sich zu Tablets entfalten, Laptops können zu Tablets werden, man kann Tastatur und Maus an so viele Dinge anschließen …
Es fühlt sich anders an, wenn man an die alte Methode gewöhnt ist, aber alles, was Sie in einem Initialisierer getan haben, ist wahrscheinlich immer noch möglich und reagiert besser auf sich ändernde Fähigkeiten.
Das können Sie jetzt, da es granulärer ist und Sie Inhalte innerhalb desselben Templates bedingt ein- oder ausblenden, anstatt das Ganze auszutauschen. Zum Beispiel haben wir jetzt ein Viewport-Objekt in unserem Capabilities-Service …
In einem Template …
{{#if this.capabilities.viewport.lg}}
Inhalt für große Bildschirme
{{/if}}
{{#if this.capabilities.viewport.sm}}
Inhalt für sehr kleine Bildschirme
{{/if}}
oder in JS …
get myContent() {
if (this.capabilities.viewport.sm) {
return "kurzer Inhalt";
} else {
return "der sehr sehr lange Inhalt"
}
}
und dann können Sie in CSS mit denselben Breakpoints ausrichten, wie zum Beispiel …
@use "lib/viewport";
.my-element {
font-size: 1em;
@include viewport.until(sm) {
font-size: 2em;
}
}