Screen Size & Resolution Checker

Check your screen resolution, viewport size, device pixel ratio, and display info instantly.

Free to use. Runs in your browser.

Instantly see your current screen resolution, viewport size, device pixel ratio, colour depth, and orientation. Useful for responsive-design testing.

Screen resolution is the whole display, while viewport size is the browser content area. Resize the window to see the viewport values update.

Screen Resolution

800 × 600

Physical Resolution

800 × 600

Browser Viewport

800 × 600

Device Pixel Ratio

Colour Depth

24-bit

Orientation

portrait primary

Good to know before reading the numbers

Browsers report CSS pixels for layout work. High-DPI screens often have more physical pixels than the viewport values suggest.

Viewport drives CSS breakpoints

Media queries such as min-width: 768px check the browser viewport, not the monitor spec.

DPR affects images

A DPR of 2 means a 300px image slot may need a 600px source image to look crisp.

Browser zoom changes readings

Zooming in reduces the effective viewport and can change the reported pixel ratio.

Orientation names vary

Some browsers report detailed values such as portrait-primary, while others return a simpler value.

Scrollbars take space

Desktop scrollbars can reduce the usable viewport by several CSS pixels.

Mobile browser chrome shifts

Address bars and toolbars can expand or collapse as you scroll, changing the visible height.

Test at real breakpoints

Use the exact viewport width shown here when reproducing a responsive layout bug.

Screenshots may use physical pixels

Screenshot tools often capture physical pixels, while CSS layout uses viewport pixels.

External monitors can differ

Dragging the browser to another display can change DPR, colour depth, and available viewport size.

Use live resize for layout bugs

Resize slowly around the breakpoint to see exactly when a layout shifts.

Record values with the bug

When reporting a layout problem, include viewport width, height, DPR, and orientation.

Refresh after moving between monitors if the display values look stale.

Understanding Screen Resolution vs Viewport Size

Your screen has two different "sizes" that matter for web development, and mixing them up causes no end of layout headaches. Screen resolution is the full display, every pixel your monitor can show. Viewport size is smaller: it's the area inside your browser window where web content actually renders, minus the address bar, tabs, and scrollbars.

Then there's device pixel ratio (DPR), which throws another spanner in the works. A Retina MacBook might report a CSS resolution of 1440×900, but its physical resolution is 2880×1800. That's a DPR of 2, each CSS pixel gets rendered using four physical pixels. This is why text and images look sharp on high-DPI screens, but it also means you need to serve 2× images for them to look crisp.

This tool reads all these values from your browser in real time. Resize your window and the viewport dimensions update instantly.

Common Screen Resolutions

Resolution	Name	Aspect Ratio	Common Devices
1366×768	HD	16:9	Budget laptops, older monitors
1920×1080	Full HD (1080p)	16:9	Most monitors, gaming displays
2560×1440	QHD (1440p)	16:9	Mid-range monitors, gaming
3840×2160	4K UHD	16:9	High-end monitors, TVs
2560×1600	WQXGA	16:10	MacBook Pro 13"
3024×1964	Liquid Retina XDR	~3:2	MacBook Pro 14"
390×844	Mobile	~9:19.5	iPhone 14/15
412×915	Mobile	~9:20	Samsung Galaxy S23

What this means for you: 1920×1080 is still the most common desktop resolution globally. But mobile traffic now exceeds 60% for most websites, so designing for 360 to 414px viewport widths matters more than ever.

CSS Breakpoints Reference

Breakpoint	Tailwind Class	Target Devices
640px	sm:	Large phones (landscape)
768px	md:	Tablets (portrait)
1024px	lg:	Tablets (landscape), small laptops
1280px	xl:	Laptops, standard desktops
1536px	2xl:	Large desktops, wide monitors

What this means for you: These Tailwind breakpoints use a mobile-first approach, styles apply from the breakpoint upward. Check your current viewport width above to see which breakpoint is active right now.

Device Pixel Ratio Explained

DPR 1× (Standard)

One CSS pixel equals one physical pixel. Common on older monitors and budget displays. Images at 1× look fine here.

DPR 2× (Retina/HiDPI)

Each CSS pixel uses 4 physical pixels (2×2). Standard on modern MacBooks, iPhones, and flagship Android devices. Serve 2× images for sharpness.

DPR 3× (Super Retina)

Each CSS pixel uses 9 physical pixels (3×3). Found on iPhone Pro Max and high-end Android phones. Consider 3× assets for hero images.

Fractional DPR (1.25×, 1.5×)

Common on Windows laptops with display scaling. Can cause sub-pixel rendering issues with thin borders and hairline rules.

Testing Responsive Designs Without Real Devices

Chrome DevTools Device Mode

Press F12 → click the device toggle icon (or Ctrl+Shift+M). You can pick preset devices or enter custom dimensions. It also simulates touch events, throttled CPU, and slow network, useful for testing how your layout behaves on a budget Android phone.

Firefox Responsive Design Mode

Ctrl+Shift+M opens Firefox's responsive view. It supports custom DPR settings, handy for testing how images render on Retina vs standard displays. You can also simulate touch and test different user agents without extensions.

Real Device Testing Services

BrowserStack and Sauce Labs give you access to real devices in the cloud. Emulators miss real-world quirks: Safari's bounce scroll, Android's soft keyboard pushing content up, notch avoidance on iPhones. For production sites, test on at least one real iOS and one real Android device.

Container Queries (Modern CSS)

Media queries respond to the viewport. Container queries respond to the parent element's size, so a card component can adapt whether it's in a sidebar or a full-width grid. Supported in all major browsers since 2023. Use @container for truly reusable responsive components.

Worked Responsive Testing Example

Say a product card looks cramped on a phone. Open the page on that device, note the viewport width, then reproduce that exact width in your desktop browser's responsive mode.

Observed viewport

390 × 844

Likely breakpoint

below sm: 640px

Next check

image width and text wrapping

The screen's physical resolution is less useful for this bug than the viewport width, because CSS media queries respond to layout pixels.

Common Screen Measurement Mistakes

Designing from physical resolution

A phone may advertise thousands of physical pixels while the browser viewport is only a few hundred CSS pixels wide.

Ignoring browser zoom

Zoom changes effective viewport width. Reset zoom before comparing a bug report with your own screen.

Forgetting dynamic mobile chrome

Mobile address bars can collapse as a user scrolls, changing the available height during a session.

Testing only one orientation

Tablet and phone layouts can cross breakpoints when rotated. Check portrait and landscape when layout density matters.

Related Tools

Aspect Ratio Calculator

Calculate and convert aspect ratios

Image Resizer

Resize images to exact dimensions

Placeholder Image Generator

Create placeholder images for any size

PX to REM Converter

Convert pixel values to rem units

CSS Border Radius Generator

Generate border-radius with visual preview

User Agent Parser

Parse browser and device info from UA strings

How to use this tool

Open this page on any device to see its screen info

Resize your browser window to watch viewport values update live

Use the readings to configure responsive breakpoints and image sizes

Common uses

Checking viewport size for responsive design testing
Verifying device pixel ratio for Retina image requirements
Debugging CSS layout issues across screen sizes
Confirming monitor resolution and display settings

Share this tool

Frequently Asked Questions

What is screen resolution?

Screen resolution is the number of pixels displayed on screen, expressed as width × height (e.g. 1920×1080). It determines how much content can fit on your display.

What is device pixel ratio?

Device pixel ratio (DPR) 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), which is why Retina displays look sharper.

Why is my resolution different from my monitor spec?

Browser zoom, display scaling, and retina/HiDPI displays affect the reported CSS resolution. Physical resolution = CSS resolution × DPR.

What's the difference between screen and viewport?

Screen resolution is your entire display. Viewport is the area inside your browser window where web content renders, it's smaller because it excludes the browser chrome (tabs, address bar, scrollbars).

Why does my viewport change when I resize?

The viewport is your browser's content area. Resizing the browser window directly changes the viewport dimensions. This tool updates in real time as you resize.

What is colour depth?

Colour depth (measured in bits) determines how many colours your display can show. 24-bit = 16.7 million colours (standard). 30-bit = 1 billion+ colours (HDR displays).

What DPR do I need for sharp images?

For 1× screens, serve images at display size. For 2× (Retina), serve at double the CSS dimensions. For 3× (iPhone Pro Max), serve at triple, or use responsive images with srcset.

How do CSS breakpoints relate to viewport?

CSS media queries like @media (min-width: 768px) check viewport width, not screen resolution. Tailwind's md: breakpoint triggers at 768px viewport width.

Why does my phone show a lower resolution than its specs?

Mobile browsers report CSS pixels, not physical pixels. An iPhone 15 Pro has 2556×1179 physical pixels but reports about 393×852 CSS pixels at 3× DPR.

Does browser zoom affect the readings?

Yes. Zooming in reduces the effective viewport size and can change the reported DPR. At 200% zoom, your viewport is effectively halved.

What is landscape vs portrait orientation?

Portrait means the screen is taller than wide. Landscape means wider than tall. Mobile devices switch between them; desktop monitors are typically fixed in landscape.

Is any data sent to a server?

No. All screen information is read from your browser's built-in APIs (window.screen, window.innerWidth, devicePixelRatio). Nothing is transmitted.

Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.