retina hidpi screen and dpr
"Retina" is the marketing name Apple gave to HiDPI screens, the ones where devicePixelRatio is 2 or higher: on those, every CSS pixel in the layout is drawn using a grid of several physical pixels, gaining sharpness without anything on the page looking smaller. This page shows the math behind that grid at DPR 1, 2 and 3.
This is the setup on older office monitors and on most external monitors still sold today: no multiplication happens between the CSS layout and the physical panel.
This is the most common DPR on Retina laptops and on most mid-range smartphones, doubling density along each axis without changing the visual size of the content.
DPR 3 is common on compact, high-density phone screens; on those devices, a regular `1x` image looks visibly blurry and only the `3x` version of the `srcset` fills the full grid.
The viewport is the visible area of the page in the browser, measured in CSS pixels. It changes when resizing the window, opening sidebars, changing zoom or rotating the device.
Not necessarily for the user experience: a higher DPR needs more image data to avoid blur (a `3x` image has nine times more pixels than the equivalent `1x`), which increases page weight and the battery cost of rendering every frame, so the sharpness gain needs to be weighed against performance.
No: DPR depends on the relationship between physical pixels and the scale factor configured in the operating system, not only on the nominal resolution. A 27-inch 4K monitor running without scaling on Windows can report DPR 1 with tiny CSS pixels, while the same panel at 200% scaling reports DPR 2.
This tool reads `window.devicePixelRatio` directly in your browser and shows the value on screen; there is no reliable way to guess the DPR from a device model alone, because the same hardware can report different values depending on the operating system scale the user has chosen.
Because the camera captures at the sensor full physical resolution, far above the screen CSS pixel resolution; when that photo is displayed at a reduced size on the page, the browser has plenty of physical pixels left to fill the DPR grid without stretching anything, which is why it looks sharp even while taking up little CSS space.
Measurements are read locally through browser APIs and do not uniquely identify your screen.