Breakpoint Indicator
Die Breakpoint-Leiste des Designers, aber auf der veröffentlichten Seite — mit der Zahl, die dir sonst fehlt.
Die Grenzen liegen bei 479, 767, 991 und 1920. Beim Ziehen des Fensters merkt man nicht, wann man eine davon überschreitet — man sieht nur, dass das Layout plötzlich anders aussieht, und weiß nicht, welche Ebene dafür zuständig ist. Die Anzeige nennt beides zugleich: die Stufe als Icon und die Breite als Zahl.
- FragenGefragt wird nicht die Fensterbreite, sondern der Browser selbst — mit denselben Media Queries, die Webflow benutzt.
- ZeigenIcon und Zahl stehen nebeneinander. Das Icon nennt die Stufe, die Zahl die genaue Breite.
- AblegenIm Weg? Anfassen und loslassen — die Anzeige rastet in die nächste Ecke und bleibt dort.
Dieses <script> in den Custom Code deines Projekts
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Breakpoint Indicator -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/breakpoint-indicator.js"></script>Veröffentlichen — mehr ist nicht zu tun
Diese Lösung braucht kein Attribut und kein Element. Sobald das Skript im Projekt steht und die Seite veröffentlicht ist, sitzt die Anzeige unten rechts. Im Designer bleibt sie unsichtbar — dort gibt es die Leiste ja schon. Alles Weitere unten ist optional.
In die Ecke legen, die dir nicht im Weg ist
Anfassen und ziehen — beim Loslassen rutscht die Anzeige in die nächstgelegene der vier Ecken, mit gleichbleibendem Abstand zum Rand. Welche Ecke es war, merkt sich der Browser: Beim nächsten Aufruf liegt sie wieder dort. Mit Maus, Finger oder Stift, und ein versehentliches Antippen verschiebt nichts — erst ab ein paar Pixeln Bewegung wird aus dem Tippen ein Zug.
OptionalStartecke und AbstandStandard: unten rechts, 24 px
Diese Angaben gehören auf das Body-Element. Sie legen fest, wo die Anzeige das erste Mal auftaucht — sobald du sie einmal von Hand gezogen hast, gilt deine Ecke.
Auf den Body
bottom-rightIn welcher Ecke die Anzeige startet. Ein unbekannter Wert fällt auf unten rechts zurück.24Abstand zum Fensterrand in Pixeln — in jeder Ecke derselbe.trueSchaltet das Merken der gezogenen Ecke ab. Dann startet die Anzeige jedes Mal wieder in der Ecke aus dem Attribut.OptionalAuf einzelnen Seiten ausblendenwenn das Skript projektweit steht
Das Skript steht einmal im Projekt und gilt damit für jede Seite. Wo die Anzeige stört — auf einer Seite, die du gerade jemandem zeigst —, blendet dieses Attribut sie aus, ohne dass du am Skript etwas ändern musst.
Auf den Body
falseDie Anzeige bleibt weg. Das Skript lädt trotzdem, tut aber nichts.falseSchreibt beim Start eine Zeile in die Browser-Konsole: aktuelle Stufe, Breite und Ecke.Zusätzliche Features
- Dieselben Grenzen wie Webflow, nicht ungefähr dieselben
- Gerechnet wird nicht mit der Fensterbreite — gefragt wird der Browser mit genau den Media Queries, die auch Webflows Stylesheet benutzt. Sonst zeigte die Anzeige an den Grenzen ein Pixel neben dem, was die Seite tatsächlich tut, und wäre genau dort unbrauchbar, wo man sie braucht.
- Die Icons sind die des Designers
- Monitor, aufgeklappter Rechner mit Stern, Tablet, Telefon quer und hochkant — Zeichnung für Zeichnung dieselben wie in der Leiste über deinem Canvas. Nachgezeichnete Icons sähen ähnlich aus und wären beim schnellen Blick doch verwechselbar.
- Die Zwischenstufen fehlen mit Absicht
- Webflow kennt oberhalb des Basis-Breakpoints noch 1280 und 1440. Beide teilen sich das Icon mit Desktop, wären also nicht zu unterscheiden — und die Zahl daneben sagt ohnehin genauer, wo du stehst.
- Nichts davon steht der Seite im Weg
- Die Anzeige hängt am Ende des Body, hat eine eigene Stapelebene und beeinflusst weder dein Layout noch deine Interaktionen. Wer weniger Bewegung eingestellt hat, bekommt keine — dann springt sie ohne Übergang in ihre Ecke.
- Eigener Code kann andocken
- Über das gemeinsame Dach meldet sich die Lösung an, sobald sie läuft. Anmelden lässt sich auch vorher — der Rückruf kommt trotzdem.