Ir al contenido principal

Referencia Técnica · Óptica de Pantalla y Unidades CSS W3C · Noviembre 2026

Guía Completa de Calibración de Pantalla y Medición PPI

La calibración de pantalla conecta los píxeles de referencia CSS abstractos de 96 PPI del W3C con el paso físico real en milímetros de tu panel hardware.

Sección 01 · Matemática de Píxeles

¿Qué diferencia hay entre PPI físico y píxeles CSS?

Los PPI físicos dependen de la resolución nativa y la diagonal del panel (PPI físico = √(W² + H²) / diagonalInches). En cambio, un píxel CSS es una unidad angular definida por el estándar W3C CSS Values Level 4 a 1/96 de pulgada CSS (3,7795 CSS px/mm). Con escalado HiDPI del sistema (como devicePixelRatio = 2 en Mac Retina o 1.25–1.5 en Windows), Online Ruler Plus calibra en pxPerMm y guarda la densidad física invariante devicePxPerMm = pxPerMm × dpr.

Sección 02 · Estándar Físico

¿Por qué la tarjeta ISO/IEC 7810 ID-1 es ideal para calibrar?

La norma ISO/IEC 7810:2019 ID-1 rige mundialmente tarjetas bancarias, permisos de conducir y carnés de identidad con dimensiones exactas de 85,60 mm de ancho por 53,98 mm de alto y radio de esquina de 3,18 mm. Igualar un rectángulo en pantalla a esa tarjeta mide directamente pxPerMm = cardWidthPx / 85.60 evitando errores de escala del SO o privacidad del navegador.

Sección 03 · Subdivisiones

¿Cómo se calculan las graduaciones en mm y fracciones de 1/16″?

Siguiendo la equivalencia exacta NIST/BIPM de 1 pulgada = 25,4 mm, los modos cm y mm dibujan marcas cada 1,0 mm, 5,0 mm y 10,0 mm. El modo Pulgadas divide cada 25,4 mm en 16 pasos de 1,5875 mm con jerarquía visual para 1/2, 1/4, 1/8 y 1/16″.

Sección 04 · Referencias Secundarias

¿Qué monedas, billetes y tamaños de papel verifican la calibración?

Según el Banco Central Europeo, una moneda de 1 Euro mide 23,25 mm y una de 2 Euros mide 25,75 mm. Según la Casa de la Moneda de EE. UU., un centavo mide 19,05 mm (3/4″) y un cuarto de dólar 24,26 mm. Una pila AA IEC R6 mide 50,50 mm de largo y el lado corto de una hoja A4 ISO 216 mide exactamente 210,0 mm.

Sección 05 · Zoom y Multimonitor

¿Cómo gestiona Online Ruler Plus el zoom y los monitores externos?

Online Ruler Plus almacena tu densidad física devicePxPerMm = pxPerMm × dpr en localStorage asociada a la firma de resolución del monitor. Al cambiar el zoom en el mismo monitor, divide devicePxPerMm entre el nuevo DPR al instante; si mueves la ventana a otro monitor, un aviso te invita a verificar la nueva pantalla.

Sección 06 · Cálculos Prácticos y Matriz HiDPI

Relación entre CSS PPI, PPI Físico y devicePxPerMm según Pantalla

Los navegadores exponen píxeles CSS lógicos cuando hay escalado HiDPI del sistema. Aplicando el teorema de Pitágoras al 100 % de zoom se obtiene CSS px/mm, y multiplicando por window.devicePixelRatio resulta devicePxPerMm.

Tabla Práctica de Densidad por Pantalla y Escala del Sistema

Configuración de PantallaResolución CSSCSS PPI EfectivoCSS px/mmdevicePxPerMm
Portátil 14.2" (Mac Retina / DPR 2×)1512 × 982 CSS px (DPR 2.0)5.000 CSS px/mm10.000 device px/mm
Portátil Windows 15.6" (Escala 125 %)1536 × 864 CSS px (DPR 1.25)4.448 CSS px/mm5.560 device px/mm
Monitor 24" 1080p (100 %)1920 × 1080 CSS px (DPR 1.0)3.614 CSS px/mm3.614 device px/mm
Monitor 27" 4K UHD (Escala 150 %)2560 × 1440 CSS px (DPR 1.5)4.283 CSS px/mm6.425 device px/mm
Smartphone OLED 6.1" (DPR 3×)390 × 844 CSS px (DPR 3.0)6.000 CSS px/mm18.000 device px/mm

Advertencia de Escala del SO · PPI Fraccionario

Por qué la calibración con tarjeta supera al cálculo estimado por diagonal

Muchos paneles reales miden 15,6″ o 26,9″ y reciben escalado fraccionario del SO (125 %, 150 % en Windows, Wayland o modos «Más espacio» en macOS) que alteran el CSS PPI efectivo. Alinear una tarjeta física de 85,60 mm mide directamente el ratio real renderizado en menos de 15 segundos.

Móviles · Pantallas Estrechas

Por qué los teléfonos usan Calibración Vertical con Tarjeta (53,98 mm)

Un móvil en retrato mide entre 360 y 430 CSS px (~58 a 72 mm), por lo que una tarjeta horizontal de 85,60 mm no cabe. El Modo Tarjeta Vertical ajusta los 53,98 mm del lado corto (pxPerMm = cardShortEdgePx / 53.98) para lograr escala 1:1 en móviles.

Windows 125%/150% y Android Chrome

Cómo calibrar portátiles Windows escalados y móviles Android

En portátiles Windows 10/11 con escala ClearType del 125% o 150%, o en Android Chrome (~360–412 px CSS de ancho), la densidad CSS varía respecto al cristal físico. Mantén el zoom del navegador al 100%, usa el modo Tarjeta Vertical (53.98 mm) en Android y ajusta los bordes con una tarjeta física.

Sección 07 · Física de Pantalla y Límites de Precisión

Paralaje del Cristal Protector y Márgenes de Tolerancia

El cristal protector de cualquier panel LCD u OLED separa el objeto entre 0,5 y 1,5 mm del plano de subpíxeles. Al mirar en ángulo θ, la refracción (índice n ≈ 1.5) desplaza la alineación aparente aproximadamente espesor × sin(θ) / n, provocando errores de 0,3 a 0,5 mm con solo 30° de inclinación.

Para mantener la repetibilidad: alinea tu vista totalmente perpendicular (90°) sobre la marca 0 y sobre la segunda guía, calibra con una tarjeta rígida y usa pie de rey o micrómetro para tolerancias inferiores a ±0,25 mm.

Tabla Oficial de Objetos Físicos de Verificación

Tras guardar la calibración, apoya suavemente cualquiera de estos artículos sobre la pantalla para comprobar la escala:

Objeto de ReferenciaMétrico (mm)Imperial (in)Norma Oficial
Tarjeta Bancaria / Crédito ISO/IEC 7810 ID-1 (Ancho)3.370 inISO/IEC 7810:2019 ID-1
Tarjeta ISO/IEC 7810 ID-1 (Alto)2.125 inISO/IEC 7810:2019 ID-1
Moneda 1 Centavo USD (Diámetro)0.750 in (3/4″)Especificación US Mint
Moneda 5 Centavos USD (Diámetro)0.835 inEspecificación US Mint
Moneda de 1 Euro (Diámetro)0.915 inBanco Central Europeo
Moneda 25 Centavos USD (Diámetro)0.955 inEspecificación US Mint
Moneda de 2 Euros (Diámetro)1.014 inBanco Central Europeo
Pila AA Estándar (Largo)1.988 inIEC R6 / ANSI 15
Billete Dólar EE. UU. (Ancho)6.140 inBureau of Engraving & Printing
Papel A4 ISO 216 (Lado Corto)8.268 inSerie ISO 216

Esquema Visual de Calibración

Comprende la Calibración Real Paso a Paso

Observa por qué varía la escala por defecto de 96 PPI y cómo una tarjeta fija la precisión física.

Observa Cada Mecánica de Medición en Movimiento

Animación activa
(0, 0) DATUM ANCHORISO ID-1 Card85.60 × 53.98 mmTRUE-SCALE LOCKMatch right edge flushwith physical card1 px/mm calibrated

Coloca una tarjeta ISO/IEC 7810 ID-1 en el origen (0, 0) y ajusta el borde hasta que coincida.

85.60 × 53.98 mm

Calibración con Tarjeta y Referencia Personalizada

FIG. 02 · CALIBRACIÓN
Diagrama de tarjeta bancaria ISO/IEC 7810 ID-1 (85.60 x 53.98 mm) alineada en (0,0) junto a un esquema de error de paralaje.
Usa cualquier tarjeta ID-1 estándar (85.60 × 53.98 mm) mirando de frente a 90° para evitar errores de paralaje.

DPI/PPI de Pantalla y Precisión Física

FIG. 09 · FÍSICA DE PANTALLA
Gráfico comparativo donde 378 px CSS miden 11.76 cm en un monitor 81.6 PPI, 6.80 cm en portátil 141.2 PPI y 10.00 cm calibrados.
Sin calibrar, los navegadores asumen 96 px CSS/pulgada, generando desviaciones de hasta un 32% entre pantallas.