About browsers and devices
Screen resolution and viewport
The difference between the entire screen and the web page's display area.
Updated: October 9, 2026
Screen resolution is the width and height of the whole screen exposed by the browser. Viewport is the browser's inner area available to the current page, excluding UI such as window frames.
How NetKarte obtains them
Compare Screen resolution and Viewport in NetKarte's Device card. To investigate a layout problem, set the window to the width where it occurs, run the diagnosis again, and check Viewport.
NetKarte uses window.screen.width and height for Screen, and window.innerWidth and innerHeight for Viewport, in CSS pixels. Viewport changes with window size and orientation.
How to read the result
Even on a 1920 × 1080 screen, opening the browser at half width produces a smaller viewport. Mobile values can change with the address bar, zoom, and rotation.
Common misconceptions
These values are not necessarily the panel's physical pixel count. OS scaling and DPR separate CSS from physical pixels, and screen size alone cannot identify a device model.
Investigate a layout problem
- Resize the browser to the problematic width.
- Run diagnostics again to read viewport width and height. NetKarte shows a snapshot, not continuous resize tracking.
- Read screen dimensions and DPR alongside it.
Illustratively, a 1920px screen can have a 768px page area; layout investigation primarily concerns the latter. The area visible after mobile pinch zoom also need not equal this layout viewport. These readings do not establish physical inches or a device model.
References
- W3C CSS Working Group: CSSOM View Module: Screen and viewport (External site)Checked: 2026-10-09
- MDN Web Docs: Screen (External site)Checked: 2026-10-09
- MDN Web Docs: Window.devicePixelRatio (External site)Checked: 2026-10-09