Schriftgrößenwert Skalierung mit Browser Zoom

Question

Ich habe ein Problem gefunden, das mich etwas verwirrt. Ich habe Schriftgröße über meine CSS-Datei mit rem Skalierung festgelegt, und eine Basisschriftgröße von 16px im html{ ... } Block in der CSS-Datei festgelegt.

Meine Ausgabe

Wenn der Browser der Skalierung des Browser eigene Zoom-Methode mit dem Text auf der Website Änderungen (Firefox v46 in diesem Fall. Ich habe auch dies mit Chrome v51 getan) Größe ganz gut, aber verschiedene Padding und einige andere Elemente haben Skalen in Bezug auf die Schriftgröße, rem Wert, aber Anzeige der berechneten und Quellcode mit Firebug (und mit Chrome-Inspektor), zeigt keine Zoom-angepasste berechnete Änderung in diesen Werten in px , auch wenn gezoomt.

Zum Beispiel:

CSS:

html,body { 
    font-size: 16px; /*the base.*/ 
} 

nav { 
    font-size: 0.75rem; /* should be 12px */ 
} 

.textBlock { 
    font-size: 0.95rem; /* should be 15.2px */ 
    padding: 0 0.15rem; /* should be 2.4px */ 
} 

Nun, wenn ich die Seite bei 100% Zoom laden, alles zeigt in großem Maßstab und alle berechneten Werte werden als kommentiert. Aber wenn ich den Zoom z. B. auf 120% vergrößere, nimmt die textuelle Größe auf der Seite proportional zu (während nicht-font-size-bezogene Elemente konsistent bleiben), aber dann lese ich die Seitenquelle mit Firebug dass:

Codeansicht:

html, body { 
    font-size: 16px; 
} 
.textBlock { 
    font-size: 0.95rem; 
    padding: 0 0.15rem; 
} 

Computed Ergebnisse

font-size: 15.2px (in textBlock). 
padding: 2.4px (in textBlock). 

Ich möchte in der Lage sein, die berechnete Größe der Elemente auf der Seite unter Berücksichtigung der Zoom-Wert zu sehen.

I unter einem Eindruck war, dass durch den Zoom des Browsers zu ändern, dass sie verändert die body (oder html) Elementbasisschriftgröße, so dass 1rem berechnete Wertänderungen 16px-17.5px (zum Beispiel), und Daher würden alle verwandten untergeordneten Elemente entsprechend skaliert.

Die Schriftarten tun skalieren, aber ich als Browser-Benutzer bekomme ich keine Rückmeldung auf die aktuelle Ausgabegröße der Schriftart Elemente auf der Seite.

Weitere Tests

• mit JavaScript (from this answer) sagt mir auch, Schriftgröße in den Hauptkörper 16px, unabhängig von Zoom.

• Das Löschen der body Schriftgröße ändert nichts.

• Einstellung der Basis body Schriftgröße auf einen rem/em Wert ändert sich auch nicht die von Firebug, Javascript oder Chrome Inspector gegeben Feedback.

Warum nicht lese ich die anderen font-size Fragen auf Stackoverflow

• Alle anderen (und es gibt durchaus ein paar) Schriftart Größe Fragen, die ich gefunden habe, beziehen sich auf Menschen setzen statische Werte wie 14px als ihre Elementgrößen und erwarten, dass sie skalieren.

• Ich kann keine nützliche Literatur (seit 2008/09) darüber finden, wie die Browser tatsächlich den Zoom-Mechanismus bedienen und wie Entwickler mit diesem Tool arbeiten können.

Was bin ich zu erreichen versuchen,/finden

Ich möchte die Webseite auf jedem Browser Zoomstufe sehen können und in der Lage sein Feedback zu erkennen und hol mir die Größe der Schrift zu sagen -Größe Wert auf verschiedene Elemente, wie zum Beispiel:

Zoom 120% on .textBlock [computed] { 
    font-size: 18.24px; /* (16px * 1.20) * 0.95 */ 
    padding-left: 2.88px; /* (16px * 1.20) * 0.15 */ 
    padding-right: 2.88px; /* (16px * 1.20) * 0.15 */ 
} 

Das ist wichtiger in meinem Fall für Polsterungen messen, wie sie rem in meiner Situation basieren oft auch sind (ich finde, dass einige Elemente aufgrund quellen über zum Browser zoom nicht 100%). Aber unabhängig von meinen eigenen Anforderungen bin ich sehr überrascht, dass ich die berechneten Werte nicht finden kann, von denen ich denke, dass sie ziemlich einfach wären. Ich möchte das beheben (und um ehrlich zu sein, ich kann mein eigenes CSS leicht genug korrigieren, aber ich wollte Feedback bekommen, um zu lesen, was die berechnete Schriftgröße ist, nach dem Zoom, aber das Problem fand ich hier).

Grundsätzlich möchte ich quantitatives Feedback von berechneten CSS-Werte von einer Website basiert auf dem Browser zu bekommen, um der Lage sein, Wert Zoomen des rem skalaren Wert.

Gibt es irgendwelche Lösungen dazu?

Answer 1

Zu allererst die rem unit is related to the root element, d.h. html daher font-size auf body Ändern hat keine Wirkung auf die untergeordneten Elemente.

Firebug und die anderen Entwicklertools zeigen die berechneten Werte gemäß der W3C-Spezifikation an. Genauer gesagt, verwenden sie die window.getComputedStyle()-Funktion, um den berechneten Wert zu erhalten, und diese Funktion berücksichtigt nicht die Zoomstufe.

Um die tatsächliche Schriftgröße zu erhalten, müssen Sie sie selbst berechnen. Wie Sie das tun, ist described by Tom Bigelajzen. Er schuf auch eine script to detect the zoom level.

Damit sollten Sie in der Lage sein, die tatsächlichen Schriftgrößen zu berechnen, indem die berechnete Schriftgröße mit dem Zoomfaktor multipliziert:

var cs = window.getComputedStyle(element); 
var actualSize = Number.parseFloat(cs.fontSize) * detectZoom.zoom();