What Is My Screen Resolution?

Your display specs, instantly detected — no settings menu needed

Responsive Viewport Tester

Select a width preset to see how content reflows at different viewport widths. The size badge updates live.

Full width
— px wide at this preset
Note: cross-origin iframes are blocked by most sites. This preview box simulates width only.

Design Breakpoints Reference

Common CSS breakpoints used by popular frameworks. Your current viewport width is highlighted.

Name Breakpoint Range Common Use

Common Screen Resolutions Reference

Name / Device Resolution Aspect DPR Common Devices Category

Browser User Agent

Loading…

What Does This All Mean?

Screen Resolution

Screen resolution is the total number of pixels your monitor can display, expressed as width × height (e.g. 1920×1080). It is a hardware property — it doesn't change unless you go into display settings and change it. Higher resolution = more pixels = sharper image and more content fits on screen.

Device Pixel Ratio (DPR)

DPR is the ratio of physical pixels to CSS (logical) pixels. A DPR of 2 means every CSS pixel is drawn using 2×2 = 4 physical pixels, making everything look sharper on "Retina" or "HiDPI" displays. Most modern smartphones have DPR ≥ 2; many MacBooks have DPR = 2; some Android phones have DPR = 3 or higher.

For web developers: use @media (-webkit-min-device-pixel-ratio: 2) or window.devicePixelRatio in JavaScript to serve higher-resolution images to HiDPI screens.

Viewport vs Screen Resolution

Your screen resolution is fixed (e.g. 1920×1080). Your viewport is the browser window's content area — it shrinks when you resize the browser, open browser chrome (DevTools, sidebars), or zoom in. CSS media queries respond to viewport size, not screen resolution. The viewport size shown here updates live as you resize your browser.

Color Depth

Color depth (in bits) determines how many distinct colors each pixel can display. 24-bit = 16.7 million colors (standard "True Color"). 30-bit = 1.07 billion colors ("Deep Color", found on professional displays). Most modern monitors are 24-bit or 30-bit.

How to Check Screen Resolution in System Settings

  • Windows 11: Right-click desktop → Display settings → "Display resolution"
  • macOS: Apple menu → System Settings → Displays
  • Ubuntu/Linux: Settings → Displays
  • Or just look at the top of this page — no settings menu needed.

Frequently Asked Questions

Your screen resolution is shown in the "Screen Resolution" card at the top of this page. It was detected automatically by your browser using the window.screen API. If you have a Retina/HiDPI display, the "Physical pixels" line shows the true hardware pixel count (screen resolution × DPR).
DPR is how many physical pixels make up each CSS logical pixel. DPR 1 = standard display. DPR 2 = Retina (your screen has 4× the pixels of a 1× display at the same CSS size). DPR 3 = found on many Android phones. Higher DPR means sharper text and images, but images need to be served at higher resolutions to benefit.
Screen resolution is the total pixels your monitor hardware has (fixed). Viewport size is the area of the browser window currently showing web content — it changes when you resize the browser, zoom in/out, open/close DevTools, or toggle the address bar. CSS media queries respond to viewport size, not screen resolution. The viewport shown here updates live as you resize.
Right-click your desktop → Display settings → scroll to "Display resolution". Or press Win+I to open Settings, then go to System → Display. You can also just check the top of this page — it shows your resolution instantly without any navigation.
Apple menu (top-left) → System Settings → Displays. Under your display name you will see the resolution. On older macOS: System Preferences → Displays. Note: on Retina Macs, macOS may show a "scaled" resolution (e.g. "Looks like 2560×1600") — this is the logical resolution. The physical hardware resolution is 2× that.