Η αρχή: βαθμονόμηση με χάρακα
Ο φυλλομετρητής δεν ξέρει το φυσικό μέγεθος της οθόνης. Με τον χάρακα του δίνεις εσύ αυτή την πληροφορία: όταν οι εικονικές χαρακιές πέσουν πάνω στις αληθινές, ξέρουμε πόσα CSS pixel καλύπτουν 1 πραγματικό εκατοστό. Αυτό το μέγεθος, ας το πούμε p (px/cm), είναι όλη η βάση του υπολογισμού.
Ο τύπος του DPI
Μία ίντσα = 2.54 cm, και κάθε CSS pixel αντιστοιχεί σε DPR φυσικά pixel του panel. Άρα τα φυσικά pixel ανά ίντσα (το DPI) είναι:
$$\mathrm{DPI} = p \times 2.54 \times \mathrm{DPR}$$
Το μετράμε ξεχωριστά για τον οριζόντιο και τον κάθετο χάρακα και δείχνουμε τον μέσο όρο:
$$\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 ≈ —″
Γιατί χρειάζεται το DPR
Σε οθόνες υψηλής πυκνότητας (retina) ένα CSS pixel δεν είναι ένα φυσικό pixel· είναι DPR φυσικά (π.χ. 2×2 = 4). Ο χάρακας μετράει σε CSS pixel, οπότε για να φτάσουμε στα πραγματικά pixel του panel πολλαπλασιάζουμε με το DPR. Χωρίς αυτό, το DPI θα έβγαινε το μισό (το «CSS ppi»).