2012-09-03 10 views
25

Ich suche nach einem zuverlässigen Weg, um die Breite des Fensters in em-Einheiten mit Javascript zu erhalten. Ich war überrascht zu sehen, dass jQuery nur ein Ergebnis in Pixelmessungen zurückgibt. Jede Hilfe wird geschätzt.Ist es möglich, die Breite des Fensters in em-Einheiten mit Javascript zu erhalten?

+3

em ist relativ zu der Größe Ihrer Schriftarten. Wenn Ihre Schriftgröße 12 px ist, gibt Ihnen die Breite des Fensters geteilt durch 12 den gleichen Betrag. Es hängt davon ab, welche Schriftart dies relativ zu – kmb64

Antwort

43

Dies scheint zu funktionieren:

$(window).width()/parseFloat($("body").css("font-size")); 
+4

sein soll Für diejenigen, die sich auf font-size% und Medienabfragen verlassen, ändern $ ("body"). Css ("font-size") zu $ ​​("html"). css ("font-size"), um eine möglichst genaue Fensterbreite in ems zu erhalten. – ontananza

+0

Das Schöne an diesem Ansatz ist, dass es extrem flexibel wird, da man das ** $ (window) .width() ** auf das Ziel ändern kann. – blackhawk

+0

Das ist großartig. Ich habe das eine Stunde lang gesucht. – salep

0

Es ist möglich, es zu berechnen, aber em ist kein „einfacher“ Einheit wie px weil es auf einer Schriftauswahl abhängt (dh eine Kombination von Schriftfamilie , Stil (fett, kursiv usw.) und Schriftgröße). Natürlich kann die Schriftgröße selbst relativ sein (z. B. wenn Sie einer Schriftart eine em, ex oder eine prozentuale Größe geben, dann wird die berechnete px Höhe für diese Schriftart von der Größe des Elternelements abgeleitet).

Um die em Breite einer Seite erhalten Sie die Konvertierung wie dies tun könnte (Warnung: psuedocode):

// For this to work reliably, size should be in px, pt, or mm. 
function getWindowWidthInEm(fontFamily, style, size) { 
    var box = document.createElement("span"); 
    box.innerText = "M"; 
    box.style.fontFamily = fontFamily; 
    box.style.fontSize = size; 
    box.style.fontWeight = style is bold; 
    box.style.fontStyle = style is italic; 

    var body = document.getElementsByTagName("body")[0]; 
    body.appendChild(box); 

    var emInPx = box.getComputedStyle().width; 

    body.removeChild(box); 

    var windowPx = window.width; 
    return windowx/emInPx; 
} 
-15

einfach, da wir 1em = 16px

var window_width_em = 1/16 * window_width_px; 
+14

Angenommen, 1em ist 16 px ist irreführend falsch. Em-Einheiten sind relativ zur kaskadierten Schriftgröße eines Elements. Hinzufügen der css 'html {font-size: 10px; } 'oder' html {font-size: 1.5em; } würde zu 1em ***! = *** 16px führen. Weiter außerhalb der Entwicklerkontrolle liegt die Tatsache, dass die "Standard-16px-Schriftgröße" vom Benutzeragenten festgelegt wird und vom Benutzer nach Belieben *** geändert werden kann. –

+15

Diese Antwort ist immer noch falsch, egal wie viele meiner Antworten Sie unten abstimmen :) –

1

Für diejenigen wissen, die es brauchen alles zusammen, funktioniert dieser Code für mich:

<p>Window size: <span id="width_px"></span> pixels or <span id="width_ems"></span> ems</p> 
<script> 
    window.onresize = function() { 
    document.getElementById("width_px").innerHTML = window.innerWidth; 
    document.getElementById("width_ems").innerHTML = window.innerWidth/parseFloat($("body").css("font-size")); 
    }; 
</script> 

Es ist PU t zusammen mit der obigen Antwort hinzugefügt, um die window-width test code im verknüpften Tutorial gefunden.

11

Hier ist eine Lösung, die jQuery nicht benötigt und keine explizite Erklärung der Schriftgröße benötigt.

+1

+1 - wird keinen Unterschied machen, aber 'html' wäre etwas * korrekter * als' body' für em nimmt die Root-Schriftart Größe und das ist HTML – m02ph3u5