CSS Zoll/mm Messungen nicht genau

Question

Ich entwickle gerade ein Tool zum Drucken von Etiketten aus dem Browser. Ich renne zu einem interessanten Thema, wo ich Etiketten habe, die 2,25 "x 1,25" sind. Als solches habe ich meine Druck-CSS für ein div auf width: 2.25in; height: 2.25in;

festgelegt. Im Chrom-Inspektor erscheinen die Abmessungen ordnungsgemäß als 2,25 Zoll; um 1.25in. Außerdem ist mein Drucker korrekt konfiguriert, da die Koordinaten exakt übereinstimmen.

Wenn die Zeit zum Drucken kommt, bekomme ich tatsächlich eine Vorschau, die nicht die gesamte 2,25x1,25 Druckvorschau ausfüllt.

http://imgur.com/K3BFSgg,CvToRSK,41fqK9D,vIL9lca

Die punktierte Grenze ist die Grenze des 2.25x1.25 Zoll div. Völlig ungenaue Messung.

Irgendwelche Ratschläge oder Tipps, was könnte schief gehen? Danke :)

Answer 1

Ein Zoll in CSS (1 in) ist definiert als 96 Pixel (source).
Dies funktioniert bei Geräten mit niedriger Dichte, bei denen 1 physikalischer Pixel = 1 Bildschirmpixel ist.

Auf Geräten mit hoher dpi (dots per inch) wie Druckern funktioniert es jedoch nicht wirklich.

---

Seing, wie Sie es das ganze Bildfenster füllen wollen, sollten Sie vielleicht an den vh und vw Einheiten einen Blick darauf werfen.
Sie werden here beschrieben.

vh steht für viewport-height und vw (Sie vermuteten es) steht für die Breite des Darstellungsbereichs.

Lange Geschichte kurz, 1 vh = 1% of screen height, gleich für vw (außer es ist die Breite).