Gibt es eine Möglichkeit zu erkennen, ob der Browser Subpixel-Präzision hat?

Gibt es eine Möglichkeit zu erkennen, ob der Browser Subpixel-Präzision für Elemente hat?

IE9 hat im Gegensatz zu allen anderen großen Browsern eine Subpixel-Präzision für seine Elemente (eine Elementbreite kann 50,25 Pixel betragen), und deshalb muss ich etwas anders behandeln.

Eine Möglichkeit besteht darin, jQuery zu verwenden, um den Namen und die Version des Browsers zu erkennen, aber dies ist in jQuery veraltet und wird nicht empfohlen, stattdessen wird vorgeschlagen, dass das Vorhandensein von Funktionen nicht für die Namen und Versionen des Browsers getestet werden sollte.

Ich bin mir nicht sicher, woher Sie die Idee haben, dass IE9 der einzige Browser ist, der gebrochene Pixeleinheiten unterstützt, aber diese Annahme ist völlig falsch.

Aus Abschnitt 4.3 der Spec (Betonung hinzugefügt):

Das Format eines Längenwerts (in dieser Spezifikation als bezeichnet) ist a (mit oder ohne Dezimalpunkt) unmittelbar gefolgt von einer Einheitenkennung (z. B. pxem usw.).

Und definierend :

Einige Werttypen können ganzzahlige Werte (gekennzeichnet durch ) oder reelle Zahlenwerte (gekennzeichnet durch ) haben. Reelle Zahlen und ganze Zahlen werden nur in Dezimalschreibweise angegeben. Eine besteht aus einer oder mehreren Ziffern “0” bis “9”. Eine kann entweder eine oder null oder mehr Ziffern gefolgt von einem Punkt (.) gefolgt von einer oder mehreren Ziffern sein. Sowohl ganzen Zahlen als auch reellen Zahlen kann ein „-“ oder „+“ vorangestellt werden, um das Vorzeichen anzugeben. -0 entspricht 0 und ist keine negative Zahl.

Daher ist per Spezifikation die px Längeneinheit muss Bruchzahlen unterstützen.

Um dies zu beweisen, werfen Sie einen Blick auf diese Geige in ganzer Bildschirm und verwenden Sie die Zoom-Funktion Ihres Browsers, um ganz hineinzuzoomen:

Beachten Sie in diesem Chrome-Screenshot, dass das blaue Kästchen mit 5,5 Pixeln tatsächlich größer ist als das rote Kästchen mit 5 Pixeln.

Ich denke, die Verwirrung könnte von der Tatsache herrühren, dass die nicht standardmäßig element.clientHeight gibt einen berechneten (gerundeten) ganze Zahl -Wert, und diese Rundung erfolgt in verschiedenen Browsern unterschiedlich.

In meiner Geige, für die clientHeight des Blaus <div>IE9 und Firefox 15 bei 100% Zoom geben 6. Chrome 22 und Opera 12 geben 5. In allen Browsern ändert sich der Wert dieser Eigenschaft, wenn der Benutzer die Zoomstufe des Browsers ändert.

Mit anderen Worten, es ist unzuverlässig.

Wenn Sie Berechnungen mit den tatsächlichen Brucheinheiten eines Elements durchführen möchten, verwenden Sie getComputedStyle.

var el = $('#b')[0]; // the actual DOM element
var height = parseFloat(getComputedStyle(el).height); // => 5.5

Sie könnten einen Container mit ungerader Größe erstellen und zwei Elemente mit einer Breite von 50 % darin ablegen und herausfinden, ob sie 50:50 geteilt wurden oder nicht.

Sehen http://jsfiddle.net/alnitak/jzrQ6/

Es kehrt zurück false auf Chrome 22.0.1229.79 auf MacOS X 10.8.2 und true auf Firefox 15.0.1. Ich habe kein MSIE, um es zu testen.

http://jsfiddle.net/KAW3d/1/

• in IE6, IE7 und Opera 12.02: 100,5px + 100,5px = 200px (zwei 100,5px-Floats passen in einen 200px-Container)
• in IE8+, Firefox 15.0.1, Chrome 22: 100,5 px + 100,5 px > 200 px

Wir mussten kürzlich einige ernsthafte pixelgenaue Berechnungen durchführen, und ich musste überprüfen, ob der Browser Subpixel-Layouts unterstützen würde. Ich habe einen Test für die Verwendung in erstellt Bedingung oder Modernizr Verwenden Sie einige andere Antworten als Leitfaden:

conditionizr.add('subpixel-layout', function() {
    var $testWrap = $(
        '<div style="width: 4px; height: 2px; position: absolute; right: 0; bottom: 0;">' +
            '<div id="subpixel-layout-1" style="width: 2.5px; height: 1px; float: left;"></div>' +
            '<div id="subpixel-layout-2" style="width: 2.5px; height: 1px; float: left;"></div>' +
        '</div>'
    ).appendTo('body');

    var supported = $('#subpixel-layout-1').position().top !== $('#subpixel-layout-2').position().top;
    $testWrap.remove();
    return supported;
});

Dann können Sie verwenden mit:

conditionizr.on('!subpixel-layout', function () {
    // subpixel layout is NOT available
});

Sie sollten in der Lage sein, dasselbe in Modernizr mit zu tun Modernizr.addTest()habe ich aber nicht getestet.

Offensichtlich benutze ich jQuery hier, sollte aber auch ohne ziemlich einfach sein.