Βαθμονόμηση με φυσικό χάρακα

Υπολόγισε το DPI της οθόνης σου (effective DPI)

Ο φυλλομετρητής δεν ξέρει το πραγματικό μέγεθος της οθόνης. Χρησιμοποίησε έναν αληθινό χάρακα πάνω στο τζάμι και ταίριαξε τον εικονικό χάρακα με τον δικό σου. Μόλις κουμπώσουν, ξέρουμε ακριβώς το DPI.

Διάλεξε μονάδα ανάλογα με τον χάρακα που έχεις (cm ή ίντσες).
Κόλλησε τον χάρακα στην οθόνη και ευθυγράμμισε το 0 του με το 0 του εικονικού.
Κούνα τον slider μέχρι οι χαρακιές να ταιριάξουν, σε όσο πιο μεγάλο μήκος γίνεται (πιο μεγάλη απόσταση = πιο ακριβές).
Κάνε το ίδιο για τον κάθετο χάρακα. Διάβασε το αποτέλεσμα πιο κάτω.

Δεν έχεις χάρακα; Μπορείς να χρησιμοποιήσεις μια τραπεζική κάρτα, που έχει σταθερό μέγεθος 85.60 × 53.98 mm (πρότυπο ISO ID-1). Στον οριζόντιο χάρακα, φέρε τη μεγάλη πλευρά της (85.60 mm) πάνω στην πορτοκαλί γραμμή. Στον κάθετο, ακούμπησε την κάρτα πάνω στο πορτοκαλί πλαίσιο μέχρι να ταιριάξουν.

Μονάδα χάρακα

εκατοστά (cm) ίντσες (inch)

Ξέρω τα DPI

Οριζόντιος χάρακας

Οριζόντιο DPI: —

Κάθετος χάρακας

Πλαίσιο κάρτας (85.60 × 53.98 mm)

Κάθετο DPI: —

Effective DPI

— ppi

Οριζόντιο DPI

—

Κάθετο DPI

—

CSS ppi (τι «βλέπει» ο browser)

—

DPR

—

Ζουμ pinch (visualViewport)

—

Πραγματικό μέγεθος

—

Διαγώνιος

—

pixel type	1 pixel σε			1 mm σε
pixel type	inch	mm	pt	pixel
css pixel	1 / —	—	—	—
logical pixel	= css¹	—	—	—
device pixel	1 / —	—	—	—
hardware pixel	= device²	?	?	?

¹ στο 100% zoom · ² όταν το σύστημα renderάρει στη native ανάλυση

ⓘ Περισσότερες πληροφορίες

Η αρχή: βαθμονόμηση με χάρακα

Ο φυλλομετρητής δεν ξέρει το φυσικό μέγεθος της οθόνης. Με τον χάρακα του δίνεις εσύ αυτή την πληροφορία: όταν οι εικονικές χαρακιές πέσουν πάνω στις αληθινές, ξέρουμε πόσα CSS pixel καλύπτουν 1 πραγματικό εκατοστό. Αυτό το μέγεθος, ας το πούμε p (px/cm), είναι όλη η βάση του υπολογισμού.

Τα τέσσερα είδη pixel

Τέσσερα «pixel» που συχνά μπερδεύονται, από το πιο νοητό στο πιο υλικό:

Όνομα	Τι είναι	Σταθερό;	Το έχουμε;
css pixel	η λογική μονάδα του browser για τη διάταξη	Όχι, αλλάζει με το zoom	✓¹
logical pixel	λογικό pixel του λειτουργικού (point / DIP)	Όχι, αλλάζει με το scaling	✓
device pixel	η επιφάνεια που renderάρει ο browser (css/logical × DPR)	Όχι, αλλάζει με scaling + zoom	✓²
hardware pixel	η υλική κουκίδα, η native ανάλυση της οθόνης	Ναι, καρφωμένο στο hardware	✗³

¹ css pixel: το μετράς εδώ, με τον χάρακα · ² device pixel: υπολογισμένο, όχι το ίδιο το panel · ³ hardware pixel: δεν έχουμε πρόσβαση, δεν το μετράμε

Γιατί λέγεται «effective» DPI

Ο browser δεν βλέπει την πραγματική οθόνη όπως είναι. Το φυσικό της μέγεθος (πόσες ίντσες) του είναι εντελώς άγνωστο, ενώ την ανάλυση την ξέρει σε CSS pixel (window.screen), επηρεασμένη από το scaling του λειτουργικού και από το zoom, όχι τα device pixel. Το DPR μας πάει στα device pixel, αλλά μπερδεύει μαζί την πυκνότητα της οθόνης με το zoom.

Επειδή λοιπόν λείπει το φυσικό μέγεθος, το DPI δεν προκύπτει από μόνο του: το μετράμε εμείς με τον χάρακα. Το αποτέλεσμα είναι το effective DPI, η πυκνότητα των device pixel (πόσα ανά ίντσα) πάνω στο τζάμι (ίσο με τα hardware pixel όταν το σύστημα renderάρει στη native ανάλυση, χωρίς ενδιάμεσο scaling), που συχνά διαφέρει από αυτό που «υποθέτει» ο browser (τα προκαθορισμένα 96 ppi^* του CSS).

^* Το CSS ορίζει σταθερά ότι 1 ίντσα = 96 CSS pixel (άρα 1px = 1/96 ίντσας, 1pt = 1.333px, 1cm ≈ 37.8px). Έτσι, για τους σκοπούς του CSS, ο browser «υποθέτει» ότι κάθε οθόνη είναι 96 ppi, ανεξάρτητα από την πραγματική της πυκνότητα. Αν γράψεις width: 1in, παίρνεις 96 CSS pixel, όχι απαραίτητα μία αληθινή ίντσα πάνω στο τζάμι.

Ο τύπος του DPI

Μία ίντσα = 2.54 cm, και κάθε CSS pixel αντιστοιχεί σε DPR device pixel. Άρα τα device pixel ανά ίντσα (το DPI) είναι:

$$\mathrm{DPI} = p \times 2.54 \times \mathrm{DPR}$$

Με pinch-zoom (touch ή trackpad) προστίθεται κι ο παράγοντας visualViewport.scale· το page-zoom (Ctrl +/−) είναι ήδη μέσα στο DPR:

$$\mathrm{DPI} = p \times 2.54 \times \mathrm{DPR} \times \mathrm{visualViewport.scale}$$

Το μετράμε ξεχωριστά για τον οριζόντιο και τον κάθετο χάρακα και δείχνουμε τον μέσο όρο:

$$\mathrm{DPI} = \frac{\mathrm{DPI}_H + \mathrm{DPI}_V}{2}$$

Στη δική σου μέτρηση: p ≈ — px/cm · DPR — → DPI ≈ — ppi

Πραγματικό μέγεθος και διαγώνιος

Ξέροντας πόσα CSS pixel = 1 ίντσα (δηλαδή p × 2.54, το «CSS ppi»), το φυσικό πλάτος βγαίνει διαιρώντας την ανάλυση της οθόνης (σε CSS pixel) με αυτό. Ομοίως το ύψος:

$$w = \frac{W_{\mathrm{px}}}{p_H \times 2.54}, \qquad h = \frac{H_{\mathrm{px}}}{p_V \times 2.54}$$

Και η διαγώνιος από το Πυθαγόρειο θεώρημα:

$$D = \sqrt{\,w^{2} + h^{2}\,}$$

Στη δική σου μέτρηση: w ≈ —″ · h ≈ —″ · D ≈ —″

Προσοχή: το φυσικό μέγεθος και η διαγώνιος ισχύουν για το τρέχον zoom. Το page-zoom του browser (Ctrl +/−) τα μετατοπίζει, γιατί το window.screen.width δεν συμβαδίζει με τη βαθμονόμηση όταν αλλάζει το zoom (και το επίπεδο zoom δεν ανιχνεύεται από τη σελίδα). Για ακριβή τιμή, μέτρα στο 100% zoom — το DPI πάντως μένει σωστό.

Γιατί χρειάζεται το DPR

Σε οθόνες υψηλής πυκνότητας (retina) ένα CSS pixel δεν είναι ένα device pixel· είναι DPR device (π.χ. 2×2 = 4). Ο χάρακας μετράει σε CSS pixel, οπότε για να φτάσουμε στα device pixel πολλαπλασιάζουμε με το DPR. Χωρίς αυτό, το DPI θα έβγαινε το μισό (το «CSS ppi»).

Τι γίνεται με το ζουμ

Στον υπολογιστή, το ζουμ της σελίδας (Ctrl και + ή −) αλλάζει το DPR: στο 200% το DPR διπλασιάζεται. Ο browser όμως δεν δίνει ξεχωριστά το «επίπεδο ζουμ», εν μέρει για λόγους ιδιωτικότητας (ώστε να μη γίνεται fingerprinting), οπότε βλέπουμε μόνο το συνολικό DPR, που ανακατεύει την πυκνότητα της οθόνης με το ζουμ. Γι' αυτό ακριβώς χρειάζεται η βαθμονόμηση με τον χάρακα: μόνο έτσι ξεχωρίζουμε το πραγματικό DPI από το ζουμ.

Σε tablet και κινητά, το pinch-zoom δεν αλλάζει το DPR (μένει σταθερό, όσο το φυσικό της συσκευής), αλλά το διαβάζουμε από το visualViewport.scale. Το ίδιο ισχύει και για το pinch με trackpad στον υπολογιστή. Έτσι, όποιον τρόπο ζουμ κι αν χρησιμοποιήσεις, ο υπολογισμός μένει σωστός: πολλαπλασιάζουμε το DPR με το visualViewport.scale (όπου υπάρχει) για να βρούμε πόσα device pixel αντιστοιχούν τελικά σε ένα CSS pixel.

Τώρα στη σελίδα: DPR — · visualViewport.scale —