Screen Guide
They sound similar but work very differently. Understanding the distinction is essential for web developers and anyone curious about how their screen displays content.
Screen resolution is the total number of physical pixels on your display (e.g. 1920×1080). Viewport is the visible area of your browser window where content renders, which is always smaller than the full resolution. On high-DPI screens, the CSS viewport can differ from physical pixels.
Screen resolution is the total number of physical pixels on your display (e.g., 1920×1080). Viewport is the browser's content area measured in CSS pixels (e.g., 1366×768). They differ because of toolbars, scaling, and device pixel ratio.
Screen resolution refers to the total number of physical pixels your display can render, expressed as width × height. Common resolutions include 1920×1080 (Full HD), 2560×1440 (QHD), and 3840×2160 (4K).
Higher resolution means more pixels packed into the same physical area, resulting in sharper images and text. A 4K display has four times the pixels of a Full HD display.
This diagram uses your own display right now, so you can see exactly how much of the screen your browser actually renders into.
The viewport is the visible area of a web page within your browser window. It is measured in CSS pixels and excludes the browser's address bar, toolbars, and scrollbars.
The viewport is what web developers actually design for. When a CSS media query says @media (max-width: 768px) , it refers to the viewport width, not the screen resolution.
Your screen resolution is the entire window in your wall. The viewport is the view through the window — if curtains (toolbars) cover part of it, your view (viewport) is smaller than the window (resolution).
The device pixel ratio is the bridge between physical pixels and CSS pixels. Modern high-DPI displays use multiple physical pixels to render each CSS pixel.
An iPhone 15 has a physical resolution of 1179×2556 pixels and a DPR of 3. This means its CSS viewport is 393×852 pixels (1179÷3 × 2556÷3). Websites "see" the 393px width. Learn more at our iPhone 15 viewport guide .
Understanding resolution vs viewport is important for:
Web developers: CSS breakpoints target viewport width, not resolution
Image optimization: Serve 2x images for Retina displays, 1x for standard
Testing: A 1920px monitor at 150% scaling has a viewport of only 1280 CSS pixels
Privacy: Both values contribute to your browser fingerprint
Check your own screen dimensions with our screen size checker . It shows both your resolution and viewport in real-time.
Screen resolution is the total number of physical pixels on your display (e.g., 2560×1440). Viewport is the area within your browser window where web content is displayed, excluding toolbars, address bars, and scrollbars. The viewport is always smaller than or equal to the screen resolution.
Device pixel ratio is the ratio between physical pixels and CSS pixels. A DPR of 2 means each CSS pixel is rendered using 4 physical pixels (2×2 grid). High-DPI displays like Apple Retina screens typically have a DPR of 2 or 3, resulting in sharper text and images.
Your phone uses CSS pixels for viewport measurements, not physical pixels. A phone with 1170×2532 physical pixels and a DPR of 3 reports a CSS viewport of 390×844 pixels. Web developers design for CSS pixels because they represent consistent visual sizes across devices.
Viewport size determines how much content is visible without scrolling and drives responsive design breakpoints. CSS media queries use viewport width (not screen resolution) to apply different styles. This ensures websites look correct regardless of the device's actual pixel count.