nicht angemeldet
Screenbreite verkleinern
0 
Rolf B
0 0 
Gunnar Bittersmann
0 0 Rolf B
0 0 Rolf B
0 Gunnar Bittersmann
0 0 Rolf B
Screenbreite verkleinern
Hallo,
ich möchte meine Anwendung an unterschiedlich breiten Bildschirmen testen. Aber sowohl Firefox wie auch der Opera lassen sich nur bis zu einer Breite von ca. 500px schmälern.
Wie kann ich noch schmälere Screens testen?
-
Hallo Holger,
mit den Entwicklerwerkzeugen, da gibt's den Viewport-Tester.
Edge:
Sieht in Chrome und FF ähnlich aus, das ist ein Umschalter. Ist er aktiv, kannst Du im Browserfenster die gewünschte Größe einstellen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
erstmal Dank für die rasche Hilfe.
Ich nehme an, dass die Breiten- und Höhenabgabe in PX sind. Ist es daher sinnvoll, bei den Angaben "@media (min-width: ....) ebenfalls die Pixelangabe zu verwenden?
Die im Internet gefundene Empfehlung verstehe ich nämlich nicht.
Empfehlung
Für feste Layouts: Verwenden Sie px.
Für flexible Layouts, die sich an die Schriftgröße des Elternelements anpassen: Verwenden Sie em.
Für flexible Layouts, die sich an die Root-Schriftgröße anpassen: Verwenden Sie rem für konsistentere Ergebnisse über die gesamte Website hinweg
-
@@Holger
Ich nehme an, dass die Breiten- und Höhenabgabe in PX sind. Ist es daher sinnvoll, bei den Angaben "@media (min-width: ....) ebenfalls die Pixelangabe zu verwenden?
Nein. Siehe [Zell].
Die im Internet gefundene Empfehlung verstehe ich nämlich nicht.
Ich auch nicht. Man sollte nicht alles glauben, was im Internet steht.
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14-
Hallo,
Siehe [Zell].
Man sollte nicht alles glauben, was im Internet steht.
Das Zell steht aber doch auch im Internet.
Dort steht u.a.:
Hence, my conclusion after these experiments is: Use em media queries.
Wenn ich mit dem Viewport-Tester einen "Bruch" in der Seitenansicht finde, wie komme ich in der media-Angabe von den dort angezeigten Pixel zu der em-Größe?
-
Hallo Holger,
grundsätzlich ist Pixelwert geteilt durch font-size = em. Viele Browser haben als Normaleinstellung einen Teiler von 16. Aber das kann jeder Benutzer anders einstellen, durch Zoomen oder durch Ändern der Browser-Defaults.
Bei @media-Abfragen muss ich jetzt aber mal kurz überlegen, die font-size welchen HTML-Elements relevant ist; ich glaube, es ist die auf dem html-Element (also die Standard-Schriftgröße des Browsers).
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
wenn ich Dich recht verstehe, gilt em = px / Schriftgröße, wobei ich die Standard-Schriftgröße des Browsers verwende, mit dem ich teste. Damit müsste es auch bei einem anderen Browser passen.
-
Hallo Holger,
Damit müsste es auch bei einem anderen Browser passen.
Wenn Du mit deinen Einstellungen feststellst, dass der Umschaltpunkt bei 60em liegen sollte, dann wird das auf einem anderen Browser mit anderen Schriften im Wesentlichen auch passen.
Vorausgesetzt, du legst die Schriftgröße auf deiner Seite und andere Bemaßungen wie margins oder paddings ebenfalls in em ein (bzw. in rem, das ist die Basisschriftgröße auf dem html-Element). Wenn Du nämlich zu den Adlerauge-Nostalgikern gehörst, die font-size:13px für ihre Texte als ideal empfinden, dann wird eine veränderte Schriftgröße des Besuchers Dir spitz auf die kleine Zehe fallen.
Wähle deine Bemaßungen nicht zu knapp. Wenn bei Dir eine Überschrift punktgenau in eine Zeile passt, dann kannst Du nicht davon ausgehen, dass das auch bei anderen so ist. Nicht jeder hat die gleiche Schriftart wie Du. Lass immer etwas Luft.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Lass immer etwas Luft.
Oder: Bedenke den den Fall, dass Text umbricht und mehrzeilig wird. Es muss dann nicht wie geleckt aussehen, aber es sollte auch nicht schrecklich aussehen.
🖖 Live long and prosper
--
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14-
@@Alle,
danke für die Tipps.
Ich habe jetzt mit dem Viewport-Tester versucht, den Umbruch bei einer bestimmten Breite zu testen. Es passiert aber folgendes.
Je schmaler ich den Viewport mache, umso kleiner wird die Schrift, und es kommt daher zu keinem Umbruch.
-
Hallo Holger,
Sicherheitsfrage: Hast Du die Viewportangabe drin?
Ansonsten kann das auch ein Problem des Viewport-Emulators sein. Bei Chrome erlebe ich das regelmäßig. Wenn die Seite Elemente enthält, die er nicht schmaler als die emulierte Viewportgröße machen kann, dann scheint er zu skalieren.
Das kann z.B. ein Bild sein, oder auch ein langes Wort, das er nicht umbrechen kann/darf. Ein Link mit der URL als Linktext ist gerne mal so ein Kandidat.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
Sicherheitsfrage: Hast Du die Viewportangabe drin?
Jetzt ja, und es sieht jetzt gut aus! Danke!
-
-
-
-
-
-
-
-
-
-