Schrift und Bilder größer in Chrome als in Firefox

[littbarski]

Hallo zusammen,

ich bin HTML-Laie, würde aber gerne etwas wissen, was ich mich schon ein paar Jahre frage.

Wo kann ich ansetzen, um herauszufinden, warum eine (reine) HTML-Seite, in Chrome (und Edge) ganz anders aussieht als in Firefox? Also von der Text-Größe her, und auch die Bilder werden nicht als 100% angezeigt in Chrome, sondern größer.

Liegt dies eher an Browser-Einstellungen, oder gibt es in HTML (Font, Style) bestimmte Vorgaben, die in Firefox ganz anders funktionieren als in Chrome?

Meine Vermutung wäre HTML, weil ich bei den Einstellungen in Chrome (die es ja durchaus gibt) keinen Erfolg habe bzw. immer nur Teile besser werden.

Ich habe für eine Freundin eine Seite erstellt, und seit langer Zeit ist das so, was uns aber erst jetzt auffiel.

Danke für jeden Tipp. Und tut mir leid, dass ich alles so laienhaft und mit wenig Informationen darstelle, ich weiß eben wirklich nicht, wo man ansetzen muss (s.o).

[Matthias Scharwies]

Servus!

Hallo zusammen,

ich bin HTML-Laie, würde aber gerne etwas wissen, was ich mich schon ein paar Jahre frage.

Herzlich willkommen!

Wo kann ich ansetzen, um herauszufinden, warum eine (reine) HTML-Seite, in Chrome (und Edge) ganz anders aussieht als in Firefox? Also von der Text-Größe her, und auch die Bilder werden nicht als 100% angezeigt in Chrome, sondern größer.

Jeder Browser hat andere Grundeinstellungen, die im Normalfall zu geringfügigen Abweichungen führen können.

Diese werden im Default-Stylesheet festgelegt.

Liegt dies eher an Browser-Einstellungen, oder gibt es in HTML (Font, Style) bestimmte Vorgaben, die in Firefox ganz anders funktionieren als in Chrome?

Nein! Das wäre auch nicht im HTML, sondern im CSS - im Stylesheet - festgelegt.

Da wäre es aber interessant, welche Einstellungen gesetzt sind.

Könntest Du ein Online-Beispiel erstellen?

Warum online-Beispiele besser als das Posten von Code sind!

Meine Vermutung wäre HTML, weil ich bei den Einstellungen in Chrome (die es ja durchaus gibt) keinen Erfolg habe bzw. immer nur Teile besser werden.

Sowohl in Chrome als auch im Firefox kann jeder Nutzer seine gewünschte Schriftgröße einstellen. Das sollte man im Stylesheet auch berücksichtigen.

Stichworte sind

• relative Schriftgrößen
• Responsives Design

Ich habe für eine Freundin eine Seite erstellt, und seit langer Zeit ist das so, was uns aber erst jetzt auffiel.

Danke für jeden Tipp. Und tut mir leid, dass ich alles so laienhaft und mit wenig Informationen darstelle, ich weiß eben wirklich nicht, wo man ansetzen muss (s.o).

Herzliche Grüße

Matthias Scharwies

[littbarski]

Vielen Dank, ich schaue genauer nach. Dennoch schon einmal hilfreich. Vielleicht ist es für eine Lösungsidee besser, wenn ich mich überhaupt nicht um die Schrift, sondern um die Bilder kümmere. Denn diese werden ja auch größer und nicht als 100% angezeigt.

Wenn wir also nur auf Bilder schauen, und annehmen, dass der Benutzer seinen Browser nicht manuell angepasst hat, woran könnte es dann liegen, dass Bilder in Chrome zu groß dargestellt werden, in Firefox aber wunderbar richtig?

[Matthias Scharwies]

Servus!

Vielen Dank, ich schaue genauer nach. Dennoch schon einmal hilfreich. Vielleicht ist es für eine Lösungsidee besser, wenn ich mich überhaupt nicht um die Schrift, sondern um die Bilder kümmere. Denn diese werden ja auch größer und nicht als 100% angezeigt.

Größer als 100%?

Gib ihnen im CSS ein

img {
  max-width: 100%
}

Wenn wir also nur auf Bilder schauen, und annehmen, dass der Benutzer seinen Browser nicht manuell angepasst hat, woran könnte es dann liegen, dass Bilder in Chrome zu groß dargestellt werden, in Firefox aber wunderbar richtig?

Ohne das sehen zu konnen, …

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Jeder Browser hat andere Grundeinstellungen, die im Normalfall zu geringfügigen Abweichungen führen können.

Ja, aber nur zu geringfügigen. Das sollte hier nicht das Problem sein.^[1]

Sowohl in Chrome als auch im Firefox kann jeder Nutzer seine gewünschte Schriftgröße einstellen.

Was aber kaum jemand macht. Das sollte hier nicht das Problem sein.

Gib ihnen im CSS ein

img {
  max-width: 100%
}

Das kann nicht schaden. Aber das sollte hier nicht das Problem sein.

Meine Vermutung ist, was @Auge sagte.

Ohne das sehen zu konnen, …

Ja, das würde helfen, die Vermutung zu bestätigen.

Kwakoni Yiquan

---

1. Einen Fall, wo sich geringfügig abweichende Grundeinstellungen bemerkbar machen, hatten wir letztens. ↩︎

[Auge]

Hallo

Vielleicht ist es für eine Lösungsidee besser, wenn ich mich überhaupt nicht um die Schrift, sondern um die Bilder kümmere. Denn diese werden ja auch größer und nicht als 100% angezeigt.

Wenn wir also nur auf Bilder schauen, und annehmen, dass der Benutzer seinen Browser nicht manuell angepasst hat, woran könnte es dann liegen, dass Bilder in Chrome zu groß dargestellt werden, in Firefox aber wunderbar richtig?

Prinzipiell solltest du als erstes schauen, ob in deinen Browsern ein Zoom aktiviert ist.

Wenn du im Chrome eine Seite aufrufst und am rechten Ende der Adresszeile ein Lupensymbol mit einem Plus oder Minus im Lupenglas zu sehen ist, ist ein Zoom ≠ 100% eingestellt (≠: ungleich). Mit einem Klick auf das Symbol öffnet sich ein Menü, mit dem man die Zoomgröße ändern und sie mit dem Button „zurücksetzen“ auf die Standardgröße von 100% bringen kann.

Falls im Firefox ein Zoom aktiviert ist, wird an der gleichen Stelle eine Prozentangabe angezeigt. Ein Klick auf die Prozentanzeige setzt die Größe auf den Standardwert zurück.

[edit]: Ein Screenshot der Zoomanzeige in den Browsern Chrome (oben) und Firefox (unten).

Das selbe Ziel erreicht man in bleiden Browsern mit der Tastenkombination [STRG]+[0] oder mit ein- oder mehrfachem betätigen der Tastenkombinationen [STRG]+[+] zum vergrößern oder [STRG]+[-] zum verkleinern des Zoomfaktors.

Wenn der Zoomfaktor in beiden Browsern 100% beträgt und dann immer noch eklatante Unterschiede angezeigt werden, müssen wir weiter sehen. Das sollte nämlich nicht der Fall sein.

Tschö, Auge

[littbarski]

Herzlichen Dank nochmals euch beiden. Ich habe die Dateien gerade nicht vor mir, melde mich später. Einen Link möchte ich nicht teilen, hoffe auf Verständnis, auch wenn genau das sicherlich bei Forumsneulingen immer etwas nerven dürfte.

Vielleicht liegt es doch an den Browser-Einstellungen :), aber natürlich hatte ich das auch schon im Verdacht und überprüft. Ansonsten schaue ich bei dem Bild-CSS.

[Matthias Scharwies]

Hallo zusammen,

Wo kann ich ansetzen, um herauszufinden, warum eine (reine) HTML-Seite, in Chrome (und Edge) ganz anders aussieht als in Firefox? Also von der Text-Größe her, und auch die Bilder werden nicht als 100% angezeigt in Chrome, sondern größer.

Ich glaube nicht, dass es allein' am Firefox und dort getroffenen Einstellungen liegt, aber ohne den Code zu sehen.

@everyone

Wo könnte man so etwas im Wiki mal übersichtlich präsentieren?

1. HTML ohne CSS

   • Browser-Einstellungen ausprobieren
   • Default-Stylesheet

2. HTML mit CSS

   • feste Schriftgrößen und Zoom
   • relative Schriftgrößen

Hier:

• CSS/Tutorials/Einstieg/Vererbung

Hier eher nicht, oder?

• CSS/Tutorials/Einstieg/Stylesheets_einbinden Warum_Layouts_mit_CSS?

oder hier?

• Responsiv(es_Webdesign)

Herzliche Grüße

Matthias Scharwies

[littbarski]

Kurze Frage hierzu: Ist bei euch in Firefox und Chrome z.B. tagesschau.de ganz genau gleich im Aussehen, v.a. was die Breite des Hauptbereichs angeht? Bei mir ist es in Chrome viel größer und die Bilder unscharf, obwohl Chrome 100% Anzeige hat und auch Windows-Grafik auf 100% steht.

[Matthias Scharwies]

Servus!

Kurze Frage hierzu: Ist bei euch in Firefox und Chrome z.B. tagesschau.de ganz genau gleich im Aussehen, v.a. was die Breite des Hauptbereichs angeht?

Ja, ist identisch!

Bei mir ist es in Chrome viel größer und die Bilder unscharf, obwohl Chrome 100% Anzeige hat und auch Windows-Grafik auf 100% steht.

Teste Du auf mehreren Geräten!

Herzliche Grüße

Matthias Scharwies

[littbarski]

Ist es bei dir auch so, dass beim Zoom in Chrome beim Wechsel von (nur mal ausprobiert) 67% zu 75% das Foto auf der Startseite bei Tagesschau kleiner wird, der Text dagegen größer? Bei 80% wird dann beides wieder größer.

[littbarski]

Dies ist bei mir hingegen nicht der Fall, wenn ich folgendes in der Chrome-Verknüpfung ergänze:

/high-dpi-support=1 /force-device-scale-factor=1

Dann scheinen auch die Fotos richtig zu sein alle (der Text aber etwas klein...).

[Matthias Scharwies]

Servus!

Nein, das Verhältnis Bilder = Text AKA Seitenaufbau bleibt immer gleich!

Dies ist bei mir hingegen nicht der Fall, wenn ich folgendes in der Chrome-Verknüpfung ergänze:

/high-dpi-support=1 /force-device-scale-factor=1

Dann scheinen auch die Fotos richtig zu sein alle (der Text aber etwas klein...).

Was für ein Gerät hast du denn?

Und hast du ein zweites, bei dem du mal testen kannst?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo littbarski,

was für ein Gerät ist das denn? Insbesondere: Was für ein Display (Auflösung, Bildschirmdiagonale)?

Responsivität und Seitenzoom können merkwürdige Folgen haben, ja.

Setze den Fall, dass der Text in einer Box steckt, deren Breite im em angegeben ist, und das Bild so ausgegeben wird, dass es den Inhalt auf 100% Viewportbreite auffüllt. Vergrößert man dann die Schrift, wird die Textbox breiter und zum Auffüllen ist weniger Platz.

Vergrößert man noch weiter, kann es sein, dass ein @media-Umschaltpunkt erreicht wird, der der Textbox weniger em als Breite gibt. Das Bild wird dann wieder größer.

Rolf

[littbarski]

Ich nutze dafür einen normalen PC mit Windows 10 und Display 1920x1200. Auf einem Laptop habe ich das Problem nicht.

Einerseits habe ich also das eigene Thema ein wenig verfehlt, wie ich merke. Im Grunde stimmt etwas nicht mit Chrome (+Edge), und ich erinnere mich jetzt wieder, dass damals irgendwann mal ein Update von Chrome kam, in dem die Skalierung dann nicht mehr (oder dann erst?) mit der Windows-Skalierung übereinstimmte. Damals hatte ich mal mehr als 100% in Windows eingestellt, dadurch konnte ich Webseiten in Chrome nicht mehr richtig überprüfen.

Andererseits kann es ja durchaus sein, dass das Windows-Skalierungsproblem in Chrome auch andere Internetnutzer haben, so dass man schauen muss in HTML und CSS, dass die Seite immer korrekt angezeigt wird. Das würde dann wieder etwas zum Thema passen :), ich gebe aber zu, dass ich hierzu nun gar keine Fragen mehr stellen kann, sondern sicher noch sehr lange bei mir schauen muss, was ich an Einstellungen noch vornehmen werde.

[littbarski]

Habe nun das Problem gefunden. Ich hatte zwar die allgemeine Display-Skalierung von Windows auf 100%, aber die erweiterte Skalierung von "Text vergrößern" erhöht.

Firefox zeigt trotz dieser Einstellung alles perfekt an, Chrome und Edge hingegen (seit wenigen Jahren) nicht mehr, weil dort aus der Windows-Einstellung etwas übernommen wird.

Was aber eben überrascht, ist, dass nicht nur der Text auf Webseiten dann größer ist, sondern die gesamte Seite ganz anders aussieht (auch z.B. bei Tagesschau), weil der Inhaltsbereich meist schmaler ist und die Bilder mit skaliert werden. Das ist aus meiner Sicht wirklich ungünstig und unlogisch, weil ich ja in Windows nur "Text" vergrößert habe, eben nicht das gesamte Display oder Bilder.

Ich scheine aber einer der wenigen zu sein, die überhaupt diese Windows-Einstellung nutzen, und ich hoffe es sogar, weil dann mein Problem mit der falsch angezeigten Webseite ja keines mehr ist.

Dennoch abschließend die Frage: Hat jemand dieses Verhalten von Chrome auch schon als Problem erlebt und gibt es hierzu in HTML einen Workaround? Firefox kann es ja auch. Also welche Art der Skalierung in HTML oder CSS würde das verhindern, dass Chrome die Windows-Text-Skalierung "falsch-richtig" übernimmt?

[Auge]

Hallo

Dennoch abschließend die Frage: Hat jemand dieses Verhalten von Chrome auch schon als Problem erlebt und gibt es hierzu in HTML einen Workaround? Firefox kann es ja auch. Also welche Art der Skalierung in HTML oder CSS würde das verhindern, dass Chrome die Windows-Text-Skalierung "falsch-richtig" übernimmt?

Mir stellt sich die Frage, ob sich Chrome überhaupt falsch verhält? Mal abgesehen davon, dass sich Firefox anders verhält und dir daher ein Unterschied aufgefallen ist, möchte man doch meinen, dass ein Windows-Benutzer die OS-eigene Skalierung mit Absicht so wählt, wie er es tut und in dem Fall, dass er sich für Chrome oder Edge als Browser entschieden hat, die Übertragung der OS-Einstellung in den Browser kennt und goutiert oder sie im Browser durch dortige Einstellungen wieder „aufhebt“. Aber warum sollte er? Wenn er alles oder auch nur bestimmte Dinge vergrößert, tut er das, weil er das braucht.

Trete mal von deiner Erfahrung mit dem Vergleich zwischen verschiedenen Browsern zurück. Der Normalanwender benutzt einen Browser. Er kennt also einerseits deinen Vergleich nicht und stellt sich OS und Browser so ein, wie er es mag. Lasse ihm das.

Tschö, Auge

[nix]

Das mit dem Zoomen kann, abhängig von den Einstellungen, auch nur Teile dessen betreffen, was da gezoomt wird.

Und beim „Rest“ könnten auch unterschiedliche Schriftarten und Größen, die da gewählt sind, für (mehr oder weniger bemerkbare) Unterschiede sorgen. Oder auch, das hängt dann von dem ab, das da angezeigt werden soll, welche Schriftarten evtl. von außen kommen, nachgeladen werden. Oder werden sollen. Auch das kann unterschielich ausfallen. Hier bei mir z. B. werden solche Gestaltungswünsche großzügig ignoriert. Auch da können die einzelnen Browser und auch da gerade geltende (benutzerspezifische) Einstellungen entsprechende Auswirkungen zeigen. Als Beispiel „ein Stück Firefox“:

Obendrein, aber da wird es jetzt in mancher Hinsicht recht speziell: es könnte sich ja auch jemand das “… it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel …” zu Herzen genommen haben – und deshalb plötzlich doch lieber auf die meist durchaus bekannten physikalischen Ausmaße der Darstellung und nicht auf „Ellen“ (welche, die des Schneiders, die des Königs oder wer?), also auf sehr grob geschätztre 96 nicht-Pixel pro nicht-Inch rücksicht genommen haben. Immerhin: das “the physical units might not match” ist ja schlicht falsch. Besser stünde da “the physical units will not match in more than 99.9% of all cases“. Und der Rest der da angeführten Überlegungen schreit ja geradezu nach einem „Standart“, nach für immer un ewig eingfügten Elementen wie

<!--[if lt IE 9]>
…
<![endif]-->

„Wenn so langsam das A20-Gate ausstirbt, braucht die Welt unbedingt einen Ersatz“?

[littbarski]

Ja, so etwas eigentlich einfaches wie unterschiedliche Textgröße, Zoom allgemein, scheint noch nicht so richtig gut umgesetzt in manchen Browsern.

Nur um es aber für meinen Fall klar zu machen: bei mir war in den Browsern alles in Ordnung, aber seit einigen Versionen macht Chrome (und Edge) leider eine Anpassung der Website-Darstellung, je nachdem, was es im System (=Windows) an Einstellungen dazu gibt. Ich hatte den normalen Windows-Zoom (Windows-Anzeige-Einstellung) durchaus auf 100%, aber den Text in Windows etwas vergrößert. Nun sollte man meinen, dass Chrome das entweder gar nicht berücksichtigt (weil es ja in Chrome eine eigene Zoom-Einstellung gibt) oder immerhin richtig berücksichtigt (Text-Zoom, aber doch nicht Bilder einfach so mal vergrößern und pixelig machen).

[Auge]

Hallo

Ja, so etwas eigentlich einfaches wie unterschiedliche Textgröße, Zoom allgemein, scheint noch nicht so richtig gut umgesetzt in manchen Browsern.

Ich möchte festhalten, dass die Unterschiede in den verschiedenen Browsern bei ansonsten gleichen Einstellungen minimal sind. Das, was du da beschreibst, liegt nicht an den generellen Unterschieden in den browsereigenen Vorgaben für das Rendering.

Tschö, Auge

[littbarski]

Das Thema wurde übrigens in vielen Google-Foren bzw. auch mit Bug-Meldungen durchaus angesprochen. Einmal bei einer Änderung vor wenigen Jahren, als Chrome zum ersten Mal die Systemeinstellungen zum Zoom übernommen hat, aber auch Ende letzten Jahres nochmal.

Chrome scheint nur das Glück zu haben, dass eben die meisten Windows-User diese Text-Einstellungen nicht ändern. Ich hingegen habe seit vielen Jahren die Einstellung in Windows "Anzeige 100%", aber "Text 140%". Dadurch wird in Chrome jede Website in Superzoom angezeigt, das würde ich nicht als minimal ansehen :).

(wie gesagt geht es hier nicht um die eigene Zoom-Einstellung in den Browsern, und diese kann man auch nicht nutzen, um die "Chrome-Vergrößerung" wieder zu korrigieren)

[nix]

nur das Glück zu haben, dass eben die meisten Windows-User diese Text-Einstellungen nicht ändern.

Das ist nicht nur unter Windows ein Problem: es gibt wohl überall in den GUIs verschiedenste Dinge, die man schon auf Benutzer-Ebene verändern kann — aber nach „Meinung“ von Entwicklern nicht darf.

Ein Beispiel (das mich besonders ärgert): als damals  beschlossen hat, die Scrollbalken grundsätzlich zu verstecken, haben sich „alle“ darauf verlassen, daß die nicht sichtbar sind. Und darauf (v. a. rechts) gebaut, daß dort dann auch nichts sichtbar ist, was ggf. Benutzeraktionen provoziert.

Nun, ich mag es nicht, wenn ich in einem Fenster erst durch versuchsweises Scrollen herausbekomme, ob alles angezeigt wird oder ob es eben doch mehr gibt. Also habe ich das abgestellt. Eine(!) Folge davon: in eyeTV¹ sind in diesen „intelligenten“ Listen (z. B. EPG) die Buttons zum Hinzufügen einer Bedingung kaum noch erreichbar, verschwinden zur Hälfte unter dem Scrollbalken. Oft führt dann ein Klick auf +⃝² sorgt schnell für das Gegenteil.

---

¹ der ElGato-Version, die von Geniatech (auch wenn auf den ersten vier oder fünf davon noch ElGato drauf steht) zeichnen sich nur durch immer mehr Fehler aus, die Vierer sind mittlerweile an, nein, auf der Grenze zur absoluten Unbenutzbarkeit angelangt; da sind aber vor allem andere Gründe entscheidend, ich vermute „Basic(-artige) Programmierung im Gleischritt mit der Verwendung eines „systemunabhänig Programmieren“ Toolkits

² Aha? “combining ring overlay” (U+2008) fühlt sich hier anscheinend als „ganz normales Zeichen“; von wegen “overlay”!

[Gunnar Bittersmann]

@@nix

Oft führt dann ein Klick auf +⃝² sorgt schnell für das Gegenteil.

² Aha? “combining ring overlay” (U+2008) fühlt sich hier anscheinend als „ganz normales Zeichen“; von wegen “overlay”!

U+20D8.

Vermutlich wolltest du aber U+20DD combining enclosing clircle. +⃝ wird hier aber auch nicht richtig gerendert.

Eigentlich wolltest du wohl U+2295 circled plus: ⊕.

---

Fußnoten gehen hier anders.

Wobei die Beschreibung nicht ganz korrekt ist, statt [^Zahl] kann es auch [^String] sein. Das dort zur Nummerierung Gesagte gilt trotzdem.

Kwakoni Yiquan

[nix geht mehr: „Autor ist bereits vergeben“]

Nein, ich habe schon den “overlay circle” gemeint. Eben wegen des “overlay”, das ich dann nicht entdecken konnte. Aber “circled plus” wäre durchaus auch angebracht gewesen. Seltsamerweise steht das und seine Genossen aber nicht in der Rubrik „umkreiste Zeichen“. Als mathematisches Symbol ist es mir, abseits von Unicode, auch noch nicht untergekommen.

Und zur Nicht-Fußnote: mal sehen, ob ich mir das merken kann. 🤔

[Rolf B]

Hallo "nix geht mehr: „Autor ist bereits vergeben“",

ich finde eine Registrierung für nix vom 6.2., mit Mailadresse post@g...s.de

Diese Mailadresse sollte eine Bestätigungsmail bekommen haben. Die Bestätigung fehlt noch.

Warst du das? Steht die Bestätigungsanfrage vielleicht im Spam?

Rolf

[nix]

Nein, das war nicht der „lästige nix“ mit seinen diversen Problemen. Der bekam nur, nach einem gerade erfolgreich abgesetzten Kommentar, plötzlich die zitierte Meldung vor die Nase. (Bin gespannt, was jetzt gleich passiert.)

[nix]

Ha, es gibt mit wieder „ohne Zusätze dran“!

[Gunnar Bittersmann]

@@littbarski

Kurze Frage hierzu: Ist bei euch in Firefox und Chrome z.B. tagesschau.de ganz genau gleich im Aussehen

Ja.

Bei mir ist es in Chrome viel größer und die Bilder unscharf, obwohl Chrome 100% Anzeige hat und auch Windows-Grafik auf 100% steht.

Hm, keine Ahnung, was du da in deinem Chrome verstellt hast.

Kwakoni Yiquan