Differences between Screen Resolution, Viewport and DPR
Screen Resolution Describes the entire display; browsers typically provide CSS pixel dimensions based on privacy, scaling, and platform differences.Viewport It is the actual available content area of the web page and will change with the window, toolbar or split screen.Device Pixel Ratio(DPR) indicates how many device pixels one CSS pixel corresponds to.
Multiplying the Screen CSS width and height by the DPR provides a common physical pixel estimate, but is not guaranteed to be equivalent to the panel's native specifications. Operating system display scaling, browser scaling, external screens, and privacy protection may change results. Front-end development should use Viewport to create layouts and DPR to select clear images, rather than guessing device models based on resolution.
How are test results used?
- Test responsive typography and Media Query with Viewport.
- Use DPR to determine Canvas output magnification or high-density image resources.
- Use touch support to improve operational goals, but don't use it as the only judgment on your phone.
- Use Color Depth to understand the color bit depth reported by the browser.