CSS VIEWPORTS, DEVICE PIXEL RATIO (DPR) & SUB-PIXEL RENDERING
Technical architecture of W3C CSS Viewport specifications, Apple Retina scaling, aspect ratio geometry, and client privacy.
1. Physical Pixels vs CSS Virtual Pixels
Before high-DPI displays emerged in 2010, one CSS pixel (1px) corresponded 1:1 with one physical display diode. With modern Apple Retina, 4K UHD, and OLED mobile displays, physical diode density far outpaces human optical acuity:
// Device Pixel Ratio Formula:
DPR = Physical Display Pixels ÷ CSS Reference Pixels (96 DPI Standard)
A device with DPR = 2.0 renders 4 physical hardware pixels for every single CSS layout pixel, ensuring pin-sharp vector typography without altering page layout scales.
2. Mathematical Aspect Ratio Reduction
Aspect ratios are calculated by finding the Greatest Common Divisor (GCD) using Euclid's algorithm:
gcd(width, height) → (width / gcd) : (height / gcd)
1. Airgapped Safety
100% in-browser telemetry. Display dimensions and hardware metrics are processed strictly locally with zero external tracker calls.
2. Reactive Polling
Zero CPU drag. Telemetry updates via asynchronous DOM event listeners only when the window actively changes.
3. Instant Telemetry Export
One-click report generator produces structured Markdown telemetry for frontend bugs, UI verification, and issue tickets.