Understanding screen resolution
Screen resolution refers to the total number of pixels your display can show, expressed as width × height (e.g. 1920 × 1080). Higher resolutions mean more detail and sharper images. The viewport size is the area available to web content inside your browser window — it excludes the browser's address bar, tabs, and scrollbars. Developers use viewport dimensions to create responsive designs that adapt to different screen sizes.
Device pixel ratio
The device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels. A DPR of 2 (common on Retina displays) means each CSS pixel is rendered using 2 × 2 = 4 physical pixels, resulting in sharper text and images. Designers need to provide @2x and @3x image assets to take advantage of high-DPR screens.
Privacy note
All information is read directly from your browser's JavaScript APIs (screen, window, navigator). No data is sent to any server. Values update in real time as you resize your browser window or change orientation.