Responsive UI Hinzufügen von Inhalt an Haltepunkten

Question

Ich versuche, Best Practices für das Hinzufügen von Inhalten zu ermitteln, wenn der Bildschirm breiter wird.

Viele Responsive-Guides zeigen, wie Sie Elemente mithilfe von Medienabfragen neu ordnen und vergrößern oder den Inhalt anders formatieren können.

Aber was, wenn ich mehr Inhalt auf dem Bildschirm haben möchte, wenn der Viewport größer wird?

Bootstrap 4 verfügt über Responsive utilities, die Elemente an bestimmten Haltepunkten verbergen können. Aber es fühlt sich falsch an. Artikel sind nur versteckt.

Dann gibt es die neue Angular Flex Layout, wo Sie Code auf Breakpoint-Ereignisse reagieren können. Es klingt wie eine Lösung, aber es muss einen anderen Weg geben, damit umzugehen.

Ich habe mich entschieden ngIfMediaQuery zu verwenden, das ist ein dünner Wrapper um die window.matchMedia API, sehr einfach zu bedienen.

<div *ngIfMediaQuery="'(min-width: 500px)'"> 
    ... 
</div> 

Answer 1

Ich denke, die meisten Menschen das Äquivalent von Bootstrap Show/auszublenden Dienstprogramme verwenden, weil es einfach ist, und einfach für Designer und Frontend Devs grok. Du hast aber recht; Es lädt Dinge, die der Client nicht benötigt. Es funktioniert für das Austauschen von Hintergrundbild-URLs, aber nicht wirklich für irgendetwas anderes.

Auf der Front-End-js können Sie Skripte, Stile und Inhalte nur nach einer Prüfung gegen Ansichtsfenstergröße oder Benutzer-Agent ajax oder anderweitig anfordern. ZB ajax in dieser wunderschönen Sidebar-Tag-Wolke, indem Sie es in eine Funktion, die ausgeführt wird oder nicht auf der Grundlage der Größe des Darstellungsbereichs ausgeführt (und erneut auf Viewport-Ereignisse überprüft). Dies ist wahrscheinlich die flexibelste Methode und kann so einfach oder komplex sein, wie Sie es möchten - obwohl es nie so einfach sein wird, nur hidden-xs in Ihr Markup zu löschen.

Sie könnten dies am Backend zusammen mit einem Front-End-Skript erreichen, das einen Session/Cookie-Parameter setzt. Soweit ich weiß, gibt es keinen Standardweg, um dies zu erreichen, und es reagiert offensichtlich weniger auf Viewport-Änderungen wie das Wechseln zwischen Landscape/Portrait. Amazon tut das und ich bin mir ziemlich sicher, dass es auf User Agent basiert.

Eine große Überlegung in all dem ist SEO. Sie möchten sicherstellen, dass Google kein Gesicht voller js und sonst nichts bekommt. They wrote a nice article on all of this, und Sie sollten wahrscheinlich lesen gehen. Wenn Sie beispielsweise verschiedene js auf der Basis eines Benutzeragenten bedienen möchten, empfehlen Sie, einen HTTP-Header hinzuzufügen, der Google anweist, die Site mithilfe verschiedener Benutzeragenten zu crawlen.