nicht angemeldet
Matthias Apsel
Robert B.
Gunnar Bittersmann
Rolf B
Der Martin
Matthias Scharwies
Auge
Hi, gibt es eine Möglichkeit (z.B. addon) im Firefox die aktuelle Viewportgröße anzuzeigen?
Hallo Rolli,
Bis demnächst
Matthias
Hallo Matthias,
danke für den Hinweis.
Allerdings stehe ich offensichtlich auf dem Schlauch.
Ich habe das addon installiert und weiß nun nicht wie ich seine Funktion aktiviere. Ich finde kein entsprechendes Icon.
Hallo Rolli,
Ich habe das addon installiert und weiß nun nicht wie ich seine Funktion aktiviere. Ich finde kein entsprechendes Icon.
Wenn du die Größe des Browsers änderst, steht oben rechts die Abmessung.
Bis demnächst
Matthias
Ich musste den Firefox einmal neu starten. Die Größe wird immer nur recht kurzzeitig eingeblendet.
Auf bestimmten Seiten (Zum Beispiel der Firefox-AddOn-Seite) wird die Größe auch überhaupt nicht angezeigt.
Hi, danke an Euch, jetzt habe ich es entdeckt. "In der Kürze liegt die Würze" könnte man zu der kurzen Anzeige sagen!
Moin,
gibt es eine Möglichkeit (z.B. addon) im Firefox die aktuelle Viewportgröße anzuzeigen?
kann nicht F12 das?
Viele Grüße
Robert
Hallo Robert B.,
kann nicht F12 das?
Hier werden die Elementabmessungen angezeigt. Und auch das HTML-Element ist nur zufällig genausogroß wie der Viewport. Oder ich habe eine andere Stelle übersehen.
Bis demnächst
Matthias
Hi,
gibt es eine Möglichkeit (z.B. addon) im Firefox die aktuelle Viewportgröße anzuzeigen?
kann nicht F12 das?
selbst wenn in den Developer-Tools die Viewport-Größe angezeigt wird:
Durch das Öffnen der Developer-Tools wird die Viewport-Größe verändert ...
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
Durch das Öffnen der Developer-Tools wird die Viewport-Größe verändert ...
Sie lassen sich auch in einem eigenen Fenster öffnen.
Bis demnächst
Matthias
Moin MudGuard,
Durch das Öffnen der Developer-Tools wird die Viewport-Größe verändert ...
wie mein Screenshot zeigt 😉
Viele Grüße
Robert
Schon mal die dort angezeigen Zahlen mit der Realität verglichen? Nur weil dort Zahlen angezeigt werden haben die noch lange nichts mit dem Viewport zu tun.,
Moin,
Schon mal die dort angezeigen Zahlen mit der Realität verglichen?
Ja.
Nur weil dort Zahlen angezeigt werden haben die noch lange nichts mit dem Viewport zu tun.
Sondern?
Viele Grüße
Robert
Keine Ahnung. Die Viewporthöhe ist meiner Ansicht nach eher eine Phantasiezahl.
Bei dir 1191,2px? Glaub ich nicht, zumal meine Firefox-Versionen ähnlich unrealistische Werte anzeigen. Bei mir bei einer Auflösung von 1920x1080px und Firefox nicht mal im Vollbildmodus. Dazu noch abzüglich Rahmen, Titelleiste, Iconleiste.
@@Rolli
gibt es eine Möglichkeit (z.B. addon) im Firefox die aktuelle Viewportgröße anzuzeigen?
Addon suchen oder so ein Script mal schnell selber schreiben:
Könnte dann so aussehen: ViewportSize.
😷 LLAP
Ich hab das hier gefunden:
MudGuard<!DOCTYPE html>
<html lang="de">
<head>
<title>Viewport</title>
<meta charset="utf-8">
<script>
function printViewport() {
vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
document.title="Viewport Breite: " + vw + "px Höhe: " + vh + "px";
}
window.onload = printViewport;
window.onresize = printViewport;
window.onreload = printViewport;
</script>
</head>
<body>
<h1>Test:</h1>
<p>Angaben zum Viewport in der Titelleiste</p>
</body>
</html>
@Gunnar
Hallo,
den Namen Javascript kenne ich, mehr aber nicht.
Daher kann ich mit Deinem Tipp leider nichts anfangen.
Gruß
Rolli
den Namen Javascript kenne ich, mehr aber nicht. Daher kann ich mit Deinem Tipp leider nichts anfangen.
Wenn Du mehr Informationen willst musst Du halt lernen wie man die bekommt…
Hallo Raketenheini,
oder Chrome/Edge verwenden. Entwicklerwerkzeuge öffnen, und schon zeigt der Browser die Viewportsize bei jeder Größenveränderung an.
oder in den Firefox-Entwicklertools den Nippel durch die Lasche ziehn[1],
und mit der kleinen Kurbel ganz nach oben drehn[2]
Da erscheint ein kleiner Pfeil[3]
und da drücken Sie dann drauf,
und schon geh'n die Lineale auf. Mit einer Anzeige der Viewportgröße.
Für Jahrgänge nach 1980: Was für'n Nippel?!?!
Rolf
Vielen Dank für den Super-Ratschlag! Also erst einmal Javascript lernen, damit man eine Funktion hat, die offensichtlich in manchen Browsern schon vorhanden ist. Die vorgestellte Javascript Version hätte allerdings den Vorteil, dass sie (vermutlich) browserunabhängig funktioniert.
Hallo,
Also erst einmal Javascript lernen, damit man eine Funktion hat, die offensichtlich in manchen Browsern schon vorhanden ist.
sieht so aus. Opera (Gott hab ihn selig) hatte das auch von Haus aus drin, musste man nur in den Einstellungen aktivieren.
Die vorgestellte Javascript Version hätte allerdings den Vorteil, dass sie (vermutlich) browserunabhängig funktioniert.
Grünau.
Live long and pros healthy,
Martin
Die vorgestellte Javascript Version hätte allerdings den Vorteil, dass sie (vermutlich) browserunabhängig funktioniert.
Hm.
Und den Vorteil, dass sich die so gewonnenen Informationen auch weiter verarbeiten lassen. Dieser Wunsch scheint hinsichtlich Informationen, die man dann hat, oft nur Zehntelsekunden später auf.
Hallo,
durch Eure Hilfe kann ich jetzt ja die Viewportgröße ermitteln.
Jetzt möchte ich für verschiedene Viewportgrößen die media-Angabe min-width oder max-width definieren.
Gefühlsmäßig würde ich die Angabe in px machen.
Allerdings habe ich auch des öfteren die Angabe in em gefunden.
Was ist nun richtig bzw. besser?
Wie rechnet sich ggf. px um in em?
Gruß Rolli
Servus!
Hallo,
durch Eure Hilfe kann ich jetzt ja die Viewportgröße ermitteln.
Jetzt möchte ich für verschiedene Viewportgrößen die media-Angabe min-width oder max-width definieren.
Bitte lies vorher dieses Tutorial:
Gefühlsmäßig würde ich die Angabe in px machen.
Allerdings habe ich auch des öfteren die Angabe in em gefunden.
Was ist nun richtig bzw. besser?
Verwende keine Breitenangaben, die Breakpoints der media queries setzt du in em, da wo es umschalten soll.
Wie rechnet sich ggf. px um in em?
Ein em sind in den meisten Browsern 16px, aber das solltest du gleich vergessen!
Gruß Rolli
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
das Tutorial hatte ich bereits gelesen (mit der Empfehlung von em). Allerdings bin ich bei meiner G...-Suche häufiger auf die px-Angabe gestoßen.
Und dies wundert mich nicht.
Wenn ich verschiedene Viewportgrößen einstelle, kann ich mit den vorgestellten Methoden die aktuelle Viewportgröße in px ablesen. Jartzt möchte ich ab/bis zu dieser Stelle eine media-Definition machen.
Wie soll ich dann die em-Angabe machen?
Servus!
Hallo Matthias,
das Tutorial hatte ich bereits gelesen (mit der Empfehlung von em). Allerdings bin ich bei meiner G...-Suche häufiger auf die px-Angabe gestoßen. Und dies wundert mich nicht. Wenn ich verschiedene Viewportgrößen einstelle, kann ich mit den vorgestellten Methoden die aktuelle Viewportgröße in px ablesen. Jetzt möchte ich ab/bis zu dieser Stelle eine media-Definition machen.
Wie soll ich dann die em-Angabe machen?
Es wurden ja schon mehrmals die 16px ≙ 1em erwähnt. Rechne es mal um und probier es auf möglichst vielen Geräten aus. Letztendlich muss man es sehen.
Allgemein ist es so, dass viele Webseiten mittlerweile weitgehend auf nebeneinander platzierte Elemente verzichten und ein relaitv schmales Layout vorziehen.
Das kann man selber aber so halten, wie man möchte.
Herzliche Grüße
Matthias Scharwies
Hallo Rolli,
um das noch zu ergänzen: Du sollst deine Media-Breaks nicht an Hand von Bildschirmabmessungen machen, sondern an Hand des Platzbedarfs in deinem Layout.
Die Frage ist nicht: bei welcher Bildschirmgröße zeige ich meine Seite wie an?
Sondern: Ab welcher Mindestbreite kann ich meine Anwendung von der Smartphone-tauglichen "alles untereinander" Ansicht auf eine breitere Ansicht umschalten. Und diese Mindestgröße hängt von deiner Schriftenwahl ab, und von der vom User eingestellten Textvergrößerung.
In einer bestimmten Größenstufe kannst Du deine Seite dann responsiv an die reale Breite anpassen (z.B. durch Wahl der Einheit vw = viewport width).
Rolf
Hallo
Gefühlsmäßig würde ich die Angabe in px machen. Allerdings habe ich auch des öfteren die Angabe in em gefunden.
Was ist nun richtig bzw. besser?
Beides funktioniert, besser ist allerdings die Angabe mit em. EM bezieht sich auf die konkret eingestellte Schriftgröße in dem Browser, den der Seitenbesucher gerade benutzt.
Wie rechnet sich ggf. px um in em?
Üblicherweise und wenn der Benutzer des Browsers die Einstellungen nicht verändert hat, ist die Schriftgröße auf Desktopbetriebssystemen mit 16px angesetzt. In diesem Fall entspricht 1em also 16px. Diese Voreinstellung kann gerade auf Mobilbetriebssystemen/-browsern abweichen. Diese Voreinstellung kann aber auch vom Benutzer geändert worden sein. Ich zum Beispiel habe als Standardschriftgröße 18px festgelegt, man wird schließlich nicht jünger (ich auch nicht).
Mit der Angabe zum Beispiel von Padding in px verändert sich der optische Abstand eines Textes zum Rahmen seines Blocks bei jeweils anderen Schriftgrößen. 10px sind bei einer realen Schriftgröße von 16px mehr als ein halber großer Buchstabe, bei 20px aber um einiges weniger. Sowas kann unangenehm eng wirken.
Mit der Angabe von Größen in em (oder rem) bleiben die Größenverhältnisse der Elemente im Dokument (bis auf Rundungsfehler) immer gleich, auch wenn sich die Schriftgröße von Besucher zu Besucher oder von Browser zu Browser auf Gerät zu Gerät eines einzelnen Benutzers unterscheiden sollte.
Die Anordnung von Seitenelementen mag sich vom Smartphone zu Desktop unterscheiden, die Inhalte einer Seite mögen sich unterschiedlich verhalten (Zeilenumbrüche etc.) aber die Verhältnisse und Abstände innerhalb der Elemente bleiben dennoch erhalten und sind einem einheitlichen und wiedererkennbaren Auftritt förderlich.
Tschö, Auge
