Questions
What is the difference between CSS pixels and physical pixels?
Web pages are measured in CSS pixels. The screen draws each CSS pixel with as many physical pixels as the pixel ratio, so a 390 × 844 phone with a ratio of 3 has 1170 × 2532 physical pixels.
What is device pixel ratio?
It is the number of physical pixels for each CSS pixel in one direction. Browser zoom and the display scaling in your system settings change it too.
Why is the viewport smaller than the screen?
The address bar, tabs, the taskbar or Dock and the window frame take up part of the screen. The viewport is the area left for the page.
What is my real screen resolution?
Multiply the CSS pixel size by the pixel ratio. On most screens this gives the native resolution, even with display scaling or browser zoom.