How it works
The Screen Resolution Checker displays your device's physical screen resolution, logical resolution, device pixel ratio, viewport size, orientation, and color depth — the complete set of display metrics that affect how your website renders on this device.
Display metrics are essential for responsive web design and debugging layout issues. A "1440p display" has a physical resolution of 2560×1440 but a device pixel ratio of 1.5–2, meaning CSS sees a logical resolution of ~1280×960. High-DPI (Retina) displays have a ratio of 2–3, meaning a 1px CSS border actually renders as 2–3 physical pixels.
Metrics explained: - Physical resolution: actual pixels on the screen hardware (e.g., 2560×1440) - Logical resolution: resolution CSS uses for layout (e.g., 1280×720 on a 2× DPI display) - Device pixel ratio (DPR): physical / logical (1 = standard, 2 = Retina, 3 = high-DPI mobile) - Viewport: visible area of the browser window (less than screen if browser UI is visible) - Color depth: bits per channel (most modern displays use 24-bit / 8 bits per channel)
Why it matters: a background image displayed at 800px wide on a Retina display needs to be 1600px to look sharp. CSS media queries use logical pixels, not physical pixels. A user with a 4K monitor but 200% scaling shows the same logical resolution as a 1080p monitor at 100% scaling.
Frequently Asked Questions
- Windows and macOS scale 4K displays to a logical resolution for usability. A 3840×2160 monitor at 200% scaling presents as 1920×1080 in CSS and JavaScript. The 'logical resolution' is what affects layout; the 'physical resolution' is the actual screen pixel count.
- Device pixel ratio (DPR) = physical pixels / CSS pixels. On a DPR 2 screen, a CSS image displayed at 400px wide uses 800 physical pixels. For sharp images on Retina displays, serve images at 2× or 3× the CSS display size.
- CSS media queries use logical (CSS) pixels, which match the logical resolution shown here. window.screen.width also returns logical pixels. Physical resolution (before DPR scaling) is available via window.screen.width × devicePixelRatio.
- As of 2024: 1920×1080 is the most common desktop resolution (~25% of users). 1366×768 is second (~15%). 1440×900 and 2560×1440 are common for higher-end displays. Mobile: 390×844 (iPhone 14), 414×896 (iPhone 11), 360×800 (common Android).