Ermitteln der Screenbreite

[Sigrid]

Hallo,

gibt es eine Möglichkeit, anzuzeigen wie breit der aktuelle Screen (oder Viewport?) ist, also eine Anzeige, wenn ich ihn verkleinere oder vergrößere?

Gruß

Sigrid

[Ryuno-Ki]

Moin Sigrid,

gibt es eine Möglichkeit, anzuzeigen wie breit der aktuelle Screen (oder Viewport?) ist, also eine Anzeige, wenn ich ihn verkleinere oder vergrößere?

Ja, tatsächlich. Findest du unter innerWidth im Wiki.

Wenn du auf Veränderungen reagieren willst, beachte den Hinweis dort: resize wird sehr oft ausgelöst.

Brauchst du da Unterstützung?

Gruß,

[Sigrid]

Ja, tatsächlich. Findest du unter innerWidth im Wiki.

Javascript blieb mir bisher erspart.

Brauchst du da Unterstützung?

Ja!

[Ryuno-Ki]

Moin Sigrid,

Ja, tatsächlich. Findest du unter innerWidth im Wiki.

Javascript blieb mir bisher erspart.

Ich verdien(t)e mein täglich Brot damit.

Brauchst du da Unterstützung?

Ja!

Kannst du ein wenig beschreiben, wofür du die aktuelle Breite des Bildschirms (also des Geräts) bzw. des Viewports (d.h. des Firefox-Fensters) brauchst? Dann kann ich beispielsweise eine kleine Demo auf CodePen oder Ähnlichem basteln.

Gruß,

[Sigrid]

Super, gerne.

Ich möchte entweder irgendwo auf dem Bildschirm oder in einer zweiten Tab neben meiner Testanwendung die Breite sehen, wenn ich den Viewport in winzigen Schritten vergrößere oder verkleinere.

[Matthias Scharwies]

Guten Morgen,

Kannst du ein wenig beschreiben, wofür du die aktuelle Breite des Bildschirms (also des Geräts) bzw. des Viewports (d.h. des Firefox-Fensters) brauchst? Dann kann ich beispielsweise eine kleine Demo auf CodePen oder Ähnlichem basteln.

So etwas gibt es im Wiki: JavaScript/Window/innerWidth ^[1]

Ich möchte entweder irgendwo auf dem Bildschirm oder in einer zweiten Tab neben meiner Testanwendung die Breite sehen, wenn ich den Viewport in winzigen Schritten vergrößere oder verkleinere.

Ich habe im Wiki mal die entsprechende Seite aufgerufen: Viewport

Dort gab es leider noch keinen Link zum Artikel über die Arbeit mit den Entwicklerwerkzeugen:

• Arbeiten mit dem Seiteninspektor#Debugging auf Mobilgeräten

Diesen Abschnitt habe ich heute um diesen Screenshot (und etwas Text) ergänzt^[2]:

Diesen Emulator startet man mit [STRG]+[SHIFT]+[m]

Anstelle des Screenshots bräuchte man hier einen kurzen Film, der zeigt, wie bei verändernder Viewportbreite die media queries greifen und die Seitenelemente neben- anstelle untereinander platziert werden.

Herzliche Grüße
Matthias Scharwies

---

1. Im Prinzip gibt es alles im Wiki, man muss es nur finden.
   Ich habe da immer zwei Fragen:
   1 Kann man die Verlinkung verbessern?
   2 Sollte man die betreffenden Seite ergänzen? ↩︎

2. Das wäre mir ein Anliegen: Kein Snippet im Forum oder Beispiele auf CodePen, sondern ein fachlich richtiger, gut zu lesender Artikel, auf den man später immer wieder verlinken kann, der aber auch im Wiki auffindbar ist. ↩︎

[Sigrid]

Hallo,

Dank an alle! Ich habe inzwischen dies gefunden, was meinen Anforderungen genügt,

Gruß

Sigrid

[Gunnar Bittersmann]

@@Sigrid

Ich habe inzwischen dies gefunden, was meinen Anforderungen genügt,

Ja klar, um etwas nachzubauen, was es im Browser schon gibt, erstmal eine JavaScript-Bibliothek laden, noch dazu von einem Google-CDN. Schlimmer geht’s kaum noch.

Warum verwendest du nicht einfach das Entwicklerwerkzeug deines Browsers?

🖖 Live long and prosper

[Ryuno-Ki]

Moin Gunnar,

Ich habe inzwischen dies gefunden, was meinen Anforderungen genügt,

Ja klar, um etwas nachzubauen, was es im Browser schon gibt, erstmal eine JavaScript-Bibliothek laden, noch dazu von einem Google-CDN. Schlimmer geht’s kaum noch.

Können wir bitte aufhören, gefundene Lösungen sofort schlecht zu reden, nur weil sie nicht „von uns” stammten? Danke.

Warum verwendest du nicht einfach das Entwicklerwerkzeug deines Browsers?

Das könnte als Gatekeeping gelesen werden.

Für mich ist das Thema abgeschlossen: eine Lösung wurde gefunden. Ich sehe keine Fragen dazu, die Implementierung nachzuvollziehen. Ist schade, aber es floss hier wohl schon einige Energie rein, ohne dass wir merklich zur Lösung beigetragen haben.

Gruß,

[Tabellenkalk]

Hallo,

Ja klar, um etwas nachzubauen, was es im Browser schon gibt, [...]

Können wir bitte aufhören, gefundene Lösungen sofort schlecht zu reden, nur weil sie nicht „von uns” stammten? Danke.

Mir ist neu, dass "wir" Browser erstellen…

Gruß
Kalk

[Gunnar Bittersmann]

@@Ryuno-Ki

Können wir bitte aufhören, gefundene Lösungen sofort schlecht zu reden, nur weil sie nicht „von uns” stammten? Danke.

Wir haben nie damit angefangen. Weil es nicht „von uns“ stammt, ist nie ein Grund, irgendwas schlechtzureden. (Jedenfalls für mich nicht.) Aber wenn es andere Gründe gibt, etwas schlechtzureden, dann soll mich „weil es nicht ‚von uns‘ stammt“ auch nicht davon abhalten.

Und eigentlich geht es auch gar nicht um die in den Untiefen von Github gefundene Lösung, sondern um deren gedankenlose Verwendung durch Sigrid.

Was soll man zu der Lösung sagen? Sie ist 9 Jahre alt. Vielleicht gab es damals noch gute Gründe, jQuery einzusetzen. Heute nicht mehr. Vielleicht hatten Browser damals die Anzeige der Viewportgröße noch nicht in ihren Entwicklertools eingebaut, sodass es einen Grund gab, etwas eigenes zu basteln. Heute nicht mehr.

Für mich ist das Thema abgeschlossen: eine Lösung wurde gefunden.

Eine gute?

🖖 Live long and prosper

[Sigrid]

Warum nachkarteln? Mit den Vorschlägen bin ich nicht zurecht gekommen. Die gefundene Lösung funktioniert, egal wie alt sie ist. Und wenn sie wegen Javascript oder anderen Änderungen nicht mehr funktioniert, bauche ich sie nicht mehr oder verstehe dann Eure Vorschläge😉

[Gunnar Bittersmann]

@@Sigrid

Warum nachkarteln? Mit den Vorschlägen bin ich nicht zurecht gekommen.

Mit „öffne die Entwicklerwerkzeuge“ bist du nicht zurechtgekommen? Warum fragst du dann nicht nach?

Bei mir (macOS) ist es [⌥ option][⌘ command][I]; bei anderen System eine andere Taste(nkombination). [F11]?

Vermutlich öffnet sich das Entwicklertool unten; das kann man dann aber nach links oder rechts legen. Wenn man das getan hat, kann man den Trenner mit der Maus o.ä. nach links und rechts schieben und damit die Viewportbreite ändern. Während man das macht, wird die aktuelle Viewportgröße rechts oben angezeigt.

Im Firefox sieht’s so aus, in anderen Browsern ähnlich:

Die gefundene Lösung funktioniert, egal wie alt sie ist.

Die jQuery-Bibliothek ist ein ziemlich großer Batzen, der da geladen werden muss. Oder nicht geladen werden muss, wenn man das Script auf „vanilla JavaScript“ umschreibt.

Und wenn man Assets wie Bibliotheken, Webfonts etc. verwendet, sollte man sie auf seinem Server selbst hosten, nicht von Google einbinden!! Privatsphäre der Nutzer achten. Google stellt seine Dienste ja nicht zum Wohle der Menschheit zur Verfügung, sondern um möglichst viele Daten über jeden einzelnen einzusammeln. 😱 Die DSGVO dürfte es verbieten, ohne Zustimmung der Nutzer Dienste von Google einzubinden oder Assets von deren Servern zu laden.

🖖 Live long and prosper

[ottogal]

Mit „öffne die Entwicklerwerkzeuge“ bist du nicht zurechtgekommen? Warum fragst du dann nicht nach?

... bei anderen System eine andere Taste(nkombination). [F11]?

Bei Windows ist es [F12]. ([F11] togglet die Full-sreen-Ansicht.)

[MudGuard]

Hi,

Mit „öffne die Entwicklerwerkzeuge“ bist du nicht zurechtgekommen? Warum fragst du dann nicht nach?

... bei anderen System eine andere Taste(nkombination). [F11]?

Bei Windows ist es [F12]. ([F11] togglet die Full-sreen-Ansicht.)

[F12] tut's auch auf meinem Mac. In Firefox und in Chrome …

Safari auf Mac: da tut [F12] nix. Da hab ich gar nix gefunden, um die Entwicklerwerkzeuge zu öffnen …

Ah - Suchmaschine sagt, daß man das erst in den Safari-Einstellungen aktivieren muß. Aber auch dann geht's nicht mit [F12], sondern mit Option-Command-C

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

[F12] tut's auch auf meinem Mac. In Firefox und in Chrome …

Ah ja. Nur dass ich keine physischen Funktionstasten auf der MacBook-Tastatur habe.

Safari auf Mac: … dann geht's nicht mit [F12], sondern mit Option-Command-C

Ja, geht auch. Die erwähnte Kombination [⌥ option][⌘ command][I] tut’s in Safari aber auch – wie in anderen Browsern.

Unterschied: [⌥ option][⌘ command][C] öffnet das Entwicklertool, schließt es aber nicht wieder. [⌥ option][⌘ command][I] öffnet und schließt.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die jQuery-Bibliothek ist ein ziemlich großer Batzen, der da geladen werden muss. Oder nicht geladen werden muss, wenn man das Script auf „vanilla JavaScript“ umschreibt.

  jQuery(document).ready(function () 

wäre in JavaScript

  document.addEventListener('DOMContentLoaded', function ()

Das bräuchtest du aber gar nicht, wenn du das <script>-Element ans Ende des <body> setzt.

---

    // neues Element als Anzeige-Container als erstes Element im Body-Tag einfuegen...
    $( "body" ).prepend 
     ( 
      $('<div/>', // Attribute erzeugen...
       { 
        'id': 'js-viewport-anzeiger', 
        'text': 'Warte auf Resize-Event...'       
       })
     );

wäre

    document.body.insertAdjacentHTML(
      'afterbegin',
      '<div id="js-viewport-anzeiger">Warte auf Resize-Event...</div>',
    );

---

    // Event-Handler (beim Ändern der Fenstergroesse Viewport-Daten in DIV-Element-Textknoten schreiben)       
    $(window).bind('resize', function () 
     {
      $('#js-viewport-anzeiger').text('Viewport: ' + 'Breite: ' + $(window).width() + ' / Höhe: ' + $(window).height() + ' Pixel') 
     }).trigger('resize');
      
   });

wäre

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      document.querySelector('#js-viewport-anzeiger').textContent
        = 'Viewport: ' + 'Breite: ' + window.innerWidth + ' / Höhe: ' + window.innerHeight + ' Pixel';
    }

    resizeHandler();

wobei man das '-auf-'-zu-Geraffel besser duch ein Templatestring ersetzt:

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      document.querySelector('#js-viewport-anzeiger').textContent
        = `Viewport: Breite: ${window.innerWidth} / Höhe: ${window.innerHeight} Pixel`;
    }

    resizeHandler();

Und document.querySelector('#js-viewport-anzeiger') sollte man nicht bei jedem resize-Event erneut ausführen, sondern einmalig am Anfang und in einer Variablen ablegen:

    const viewportAnzeiger = document.querySelector('#js-viewport-anzeiger');

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      viewportAnzeiger.textContent
        = `Viewport: Breite: ${window.innerWidth} / Höhe: ${window.innerHeight} Pixel`;
    }

    resizeHandler();

---

Sieht dann so aus: Codepen.

Und schon brauchst du die jQuery-Bibliothek nicht mehr, die Zeile

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

kann restlos entsorgt werden.

🖖 Live long and prosper

[Gunnar Bittersmann]

@@Gunnar Bittersmann

    // Event-Handler (beim Ändern der Fenstergroesse Viewport-Daten in DIV-Element-Textknoten schreiben)       
    $(window).bind('resize', function () 
     {
      $('#js-viewport-anzeiger').text('Viewport: ' + 'Breite: ' + $(window).width() + ' / Höhe: ' + $(window).height() + ' Pixel') 
     }).trigger('resize');
      
   });

wäre

    window.addEventListener('resize', resizeHandler);

    function resizeHandler() {
      document.querySelector('#js-viewport-anzeiger').textContent
        = 'Viewport: ' + 'Breite: ' + window.innerWidth + ' / Höhe: ' + window.innerHeight + ' Pixel';
    }

    resizeHandler();

Eigentlich wäre es wohl

    window.addEventListener('resize', function () {
      document.querySelector('#js-viewport-anzeiger').textContent
        = 'Viewport: ' + 'Breite: ' + window.innerWidth + ' / Höhe: ' + window.innerHeight + ' Pixel';

    });

    window.dispatchEvent(new Event('resize'));

Ich würde das aber auf die erstgenannte Weise machen – natürlich mit den im Vorposting genannten Verbesserungen.

Geht aber auch auf die zweite Art: Codepen

🖖 Live long and prosper

[Sigrid]

Hallo,

Geht aber auch auf die zweite Art: Codepen

Ich wollte jetzt dieses Beispiel in mein HTML einbauen und zwar so, dass dieses Teststückchen nicht zerrissen wird in eine CSS-Angabe und dem HTML (obwohl dies natürlich empfohlen wird). Es ist ja aber nur ein Teststück! Jetzt ist mir aber folgendes aufgefallen.

In der style-Version steht der Text korrekt rechts,

in der anderen Version steht er links.

Was ist hierfür die Ursache?

Ob die vielen Attribute benötigt werden, sei dahingestellt!

[Matthias Scharwies]

Servus!

Jetzt ist mir aber folgendes aufgefallen.

In der style-Version steht der Text korrekt rechts,

Ja, weil:

div {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  text-align: right;
  padding: 0;
}

in der anderen Version steht er links.

Was ist hierfür die Ursache?

Dort gibt es kein CSS, dass das div mit der id js-viewport-anzeiger fomratiert.

Herzliche Grüße
Matthias Scharwies

[Gunnar Bittersmann]

@@Sigrid

In der style-Version steht der Text korrekt rechts,

in der anderen Version steht er links.

Was ist hierfür die Ursache?

Das Entwicklertool ist zu mehr gut als die Breite des Viewports zu ändern und dessen Größe anzuzeigen. Mal einen Blick reingeworfen:

Du siehst, dass das div-Element, für das du die Stilangaben gemacht hast, nicht dasjenige ist, in welchem die Viewportgröße steht. Kann ja auch gar nicht; das div mit der Viewportgröße steht ja gar nicht im Markup, sondern wird durch das Script generiert.

Du müsstest die Stilangaben also für das richtige div machen, d.h. für das durch das Script generierte:

	document.body.insertAdjacentHTML(
		"afterbegin",
		'<div id="js-viewport-anzeiger" style="…">Warte auf Resize-Event...</div>'
	);

Und das div im Markup brauchst du nicht; es macht keinen Sinn, das script in ein div zu packen.

🖖 Live long and prosper

[Sigrid]

Danke, das hat funktioniert.

Jetzt habe ich das in meine Seite eingebaut. Da verschiebt sich ja alles nach unten. Wie kann ich erreichen, dass der Text die oberste Zeile überlagert?

[Rolf B]

Hallo Sigrid,

position:sticky belegt Platz. Verwende entweder fixed oder absolute.

Rolf

[Ryuno-Ki]

Moin Matthias,

Das wäre mir ein Anliegen: Kein Snippet im Forum oder Beispiele auf CodePen, sondern ein fachlich richtiger, gut zu lesender Artikel, auf den man später immer wieder verlinken kann, der aber auch im Wiki auffindbar ist. ↩︎

Ich bin jetzt verwirrt. Später im Thread kamen jetzt doch CodePen-Implementierungen.

Ohne Lizenzangaben lassen sie sich auch nicht in das Wiki übernehmen.

Gruß,

[Matthias Scharwies]

Servus!

Moin Matthias,

Das wäre mir ein Anliegen: Kein Snippet im Forum oder Beispiele auf CodePen, sondern ein fachlich richtiger, gut zu lesender Artikel, auf den man später immer wieder verlinken kann, der aber auch im Wiki auffindbar ist. ↩︎

Ich bin jetzt verwirrt. Später im Thread kamen jetzt doch CodePen-Implementierungen.

Ohne Lizenzangaben lassen sie sich auch nicht in das Wiki übernehmen.

Genau.

Deshalb fände ich es besser, wenn die SELFer eben keine - später nicht mehr / oder nur schwer auffindbare - Codepens entwerfen, sondern bestehende Wiki-Artikel so verbessern, dass das Problem für spätere Generationen verfügbar ist.

(Meist adaptiere ich CodePen-Lösungen aber doch mit SELF-Farben und geringfügigen Änderungen und verlinke auf das Original.)

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Matthias,

generell ja.

Ich würde für die nächste MV als Agendapunkt einreichen wollen, dass die Vereinsmitglieder darin übereinstimmen, dass ein Fiddle, Pen, TryIt oder sonstwas, das zum Zweck einer Illustration einer Forenantwort von einem Vereinsmitglied erstellt wird, automatisch die Lizenz für den Gebrauch für Selfhtml, inclusive einer Wiki-Übernahme, beinhaltet.

Was für Gunnar bedeuten würde, dass er bei Pens, die er für andere Zwecke erstellt hat und die er aus der Schublade zieht, explizit darauf hinweisen müsste. Ich will das hier nicht diskutieren, dafür ist Platz auf der MV, nur den Gedanken anregen.

Im konkreten Fall würde ich aber keine Wiki-Übernahme anstreben. Wir waren uns doch eigentlich einig, dass hier eine existierende Browserfunktionalität unnötig nachgebaut wird.

Oder verstand ich das falsch?

Rolf

[Matthias Scharwies]

Servus!

Ich würde für die nächste MV als Agendapunkt einreichen wollen, dass die Vereinsmitglieder darin übereinstimmen, dass ein Fiddle, Pen, TryIt oder sonstwas, das zum Zweck einer Illustration einer Forenantwort von einem Vereinsmitglied erstellt wird, automatisch die Lizenz für den Gebrauch für Selfhtml, inclusive einer Wiki-Übernahme, beinhaltet.

Gute Idee!

Im konkreten Fall würde ich aber keine Wiki-Übernahme anstreben. Wir waren uns doch eigentlich einig, dass hier eine existierende Browserfunktionalität unnötig nachgebaut wird.

Oder verstand ich das falsch?

Nein, genau richtig!

Ich hatte gestern ein bisschen mit OBS, dem Holy-Grail-Layout und dem Seiteninspektor des Firefox herumgespielt - wenn ich doch nur mehr Zeit hätte!

Herzliche Grüße und ein schönes langes Wochenende!
Matthias Scharwies

[Rolf B]

Hallo Sigrid,

das Mittel der Wahl hängt vom Zweck ab. Wenn du es beim Entwickeln wissen willst, öffne die Entwicklerwerkzeuge, die zeigen eigentlich beim Ändern der Fenstergröße den aktuellen Wert an, und es gibt auch eine Emulation von Mobilgeräten.

Wenn du per resize Event auf Größenänderungen reagieren willst, wäre die Frage, ob @media- oder @container-Queries hilfreich sein könnten.

Rolf

[Sigrid]

Hallo Rolf,

Wenn du es beim Entwickeln wissen willst, öffne die Entwicklerwerkzeuge, die zeigen eigentlich beim Ändern der Fenstergröße den aktuellen Wert an, und es gibt auch eine Emulation von Mobilgeräten.

Wo finde ich es genau?

Was ich gefunden habe ist "Bildschirmgröße testen" (Firefox). Dort kann ich verschiedene Formate einstellen, allerdings erfolgt keine Veränderung, wenn ich die Bildschirmbreite verändere.

Gruß

Sigrid

[Ryuno-Ki]

Moin Sigrid,

Hallo Rolf,

Wenn du es beim Entwickeln wissen willst, öffne die Entwicklerwerkzeuge, die zeigen eigentlich beim Ändern der Fenstergröße den aktuellen Wert an, und es gibt auch eine Emulation von Mobilgeräten.

Wo finde ich es genau?

Soweit ich weiß, musst du da einen Haken in den Einstellungen für setzen. Überschrift heißt hier „Verfügbare Schaltflächen-Symbole“.

Gruß,

[Rolf B]

Hallo Sigrid,

zunächst mal müssen, wie André schrieb, die entsprechenden Buttons aktiviert sein. Das Entwickerwerkzeuge-Fenster (oder -Panel, wenn Du kein eigenes Fenster draus machst) hat ein Popupmenü, das sich hinter drei Punkten versteckt. Da gibt's die Auswahl zwischen Fenster und Panel, und da gibt's den Menüpunkt Einstellungen, worin Du "Verfügbare Schaltflächensymbole" findest.

Darin findest Du:

• "Bildschirmgrößen testen" und bekommst im Entwicklerwerkzeuge-Fenster/-Panel ein Toggle-Icon mit einem Handy und einem Tablet. Klicke darauf um den Viewport-Emulator ein- und auszuschalten.
• "Lineale für Seiten" und bekommst ein Toggle-Icon mit einem abgewinkelten Lineal
• "Abmessungen auf der Seite bestimmen" und bekommst ein Toggle-Icon mit einem geraden Lineal drauf.

In den Einstellungen sagst Du nur, dass Du die Toggles haben willst. Ein- oder Ausschalten kannst Du die Funktion dann nach Bedarf.

Wenn Du Lineale einschaltest, blendet FF Lineale am Fensterrand und oben rechts die Seitengröße ein.

Wenn Du "Abmessungen" einschaltest, kannst Du die Seite nicht mehr bedienen, bekommst aber einen Maus-Tip mit der aktuellen Position und kannst mit der Maus Rechtecke aufziehen, deren Breite, Höhe und Diagonalenlänge eingeblendet wird.

Wenn Du "Bildschirmgrößen" einschaltest, simuliert FF einen verkleinerten Viewport im Browserfenster. Die Größe des Browserfensters ist dann nicht mehr relevant, aber der simulierte Viewport hat Henkel zum Ändern seiner Größe. Hinzu kommt eine Toolbar, wo Du ebenfalsl die Größe ändern kannst und noch ein paar Dinge mehr, z.B. das CSS/Device-Pixelverhältnis (Punktdichte).

Hilft das?

Rolf

[Sigrid]

Hallo,

leider habe ich noch keinen Vorschlag gefunden, der das leistet, was ich wollte.

Die Vorschläge zielen i.d.R. darauf ab, unterschiedliche Größen einzustellen, nicht aber, dass die Größen angezeigt werden, beim kontinuierliche Verändern der Screengröße.

Ein Javascript hierfür erstellen, kann ich nicht.

[Gunnar Bittersmann]

@@Sigrid

leider habe ich noch keinen Vorschlag gefunden, der das leistet, was ich wollte.

Die Vorschläge zielen i.d.R. darauf ab, unterschiedliche Größen einzustellen, nicht aber, dass die Größen angezeigt werden, beim kontinuierliche Verändern der Screengröße.

Nicht der, den @Rolf B bereits in seiner ersten Antwort gab: „Wenn du es beim Entwickeln wissen willst, öffne die Entwicklerwerkzeuge, die zeigen eigentlich beim Ändern der Fenstergröße den aktuellen Wert an“

Den Rest hab ich weggelassen, damit du nicht weiter an der falschen Stelle suchst.

Ein Javascript hierfür erstellen, kann ich nicht.

Du musst ja auch nichts nachbauen, was Browser schon von sich aus machen.

🖖 Live long and prosper

PS: Was mit „Entwicklerwerkzeuge“ gemeint ist, weißt du?

[Matthias Scharwies]

Servus!

Hallo,

leider habe ich noch keinen Vorschlag gefunden, der das leistet, was ich wollte.

Die Vorschläge zielen i.d.R. darauf ab, unterschiedliche Größen einzustellen, nicht aber, dass die Größen angezeigt werden, beim kontinuierliche Verändern der Screengröße.

siehe oben

im Firefox [STRG]+[SHIFT]+[m]

kontinuierliche Verändern der Screengröße.

dann dort wo der rote Pfeil ist, reinklicken - das ist ein numerisches Eingabefeld, in dem du Werte auch mit Pfeiltasten ändern kannst, so dass der Viewport kontinuierlich größer oder kleiner wird.

Herzliche Grüße
Matthias Scharwies

[Rolf B]

Hallo Sigrid,

deswegen fragte ich nach dem Zweck, den Du verfolgst.

Ein Javascript hierfür erstellen, kann ich nicht.

Ich kauf Dir das Komma ab, das brauchst Du nicht.

Was heißt "Kann ich nicht"? Fehlt Dir dazu die persönliche Befähigung oder bist Du in einem Umfeld aktiv, wo JavaScript – aus welchem Grund auch immer – nicht genutzt werden darf?

Praktisch ist es aber so, dass Du für eine "Live-Anzeige" der Viewportgröße innerhalb der Website – ohne die Entwicklertools – an JavaScript nicht vorbeikommst. Mit HTML und CSS alleine ist das nicht möglich.

Äh. Hm. Eigentlich geht es mit CSS schon. Mit einer Flut von @media-Abfragen und content-Zuweisungen. Aber das ist so eklig, das zeig ich gar nicht erst her.

Rolf

[Gunnar Bittersmann]

@@Rolf B

eine "Live-Anzeige" der Viewportgröße innerhalb der Website

?? Was soll das? Welcher Nutzer will die Größe des Viewports auf einer Webseite sehen? Keiner? Eben.

Das wollen nur Entwickler. Und die haben dafür das Entwicklertool ihres Browsers. Problem gelöst.

Äh. Hm. Eigentlich geht es mit CSS schon. Mit einer Flut von @media-Abfragen und content-Zuweisungen. Aber das ist so eklig, das zeig ich gar nicht erst her.

Mit CSS-Präprozessor wäre das wohl ein Zweizeiler. Aber ja, der generierte CSS-Code wäre eklig.

🖖 Live long and prosper

[Rolf B]

Hallo Gunnar,

Das wollen nur Entwickler. Und die haben dafür das Entwicklertool ihres Browsers. Problem gelöst.

Ich möchte einen gewissen Herrn Bittersmann zitieren: frage deine User, was sie wollen, triff keine Annahmen darüber.

Dass wir zwei uns den Usecase nicht vorstellen können, muss ja nicht heißen, dass er generell unvorstellbar ist.

Allerdings sind die Entwicklerwerkzeuge für mich noch nicht aus dem Rennen. Denn dieser Satz

Die Vorschläge zielen i.d.R. darauf ab, unterschiedliche Größen einzustellen

zeigt mir, dass Sigrid den bisherigen Threadinhalt nicht vollständig erfasst hat. Es gab klare Vorschläge, wie man mit den Entwicklerwerkzeugen die Größe anzeigen lassen kann. Auch live, während des Resizings.

Rolf

[Gunnar Bittersmann]

@@Rolf B

zeigt mir, dass Sigrid den bisherigen Threadinhalt nicht vollständig erfasst hat.

Ja, *seufz*.

Es gab klare Vorschläge, wie man mit den Entwicklerwerkzeugen die Größe anzeigen lassen kann.

Ja. Vielleicht hättest du es dabei bewenden lassen sollen. Alles andere lenkt nur davon ab.

🖖 Live long and prosper