Question 1

What is a viewport in web design?

Accepted Answer

The viewport is the visible area of a web page in your browser window — the space where content actually renders. It is measured in CSS pixels, which may differ from your screen's physical (hardware) pixels. Responsive web design uses the viewport width to determine which layout to show.

Question 2

What is the difference between viewport size and screen resolution?

Accepted Answer

Screen resolution is the total number of physical pixels your display has (e.g. 2560×1440). Viewport size is the area available for web content in CSS pixels (e.g. 1280×720). On high-DPI displays, the screen resolution is typically 2× or 3× the viewport size, determined by the device pixel ratio (DPR).

Question 3

What is device pixel ratio (DPR)?

Accepted Answer

Device pixel ratio is the ratio between physical pixels and CSS pixels on your screen. A DPR of 2 means each CSS pixel is rendered using 2×2 = 4 physical pixels. Most modern phones have a DPR of 3, laptops are typically 2, and standard desktop monitors are 1. Higher DPR means sharper text and images.

Question 4

What are CSS breakpoints?

Accepted Answer

Breakpoints are specific viewport widths where a responsive layout changes. For example, Tailwind CSS uses 640px (sm), 768px (md), 1024px (lg), 1280px (xl), and 1536px (2xl). When your browser window crosses a breakpoint, the page layout adapts — sidebars might collapse, grids reflow, and font sizes change.

Question 5

Why does my viewport size change when I resize my browser?

Accepted Answer

Your viewport is the browser's content area, not your screen. When you resize the browser window, the viewport changes accordingly. On mobile devices, the viewport is the full screen (minus browser chrome). On desktop, it depends on your window size. This tool updates live as you resize.

Question 6

How do I find the viewport size of a specific device?

Accepted Answer

Use the Device Viewport Database at viewpo.io/tools/device-viewports/ to look up the viewport dimensions of 50+ popular phones, tablets, and laptops. Each device page shows the CSS viewport size, physical resolution, DPR, and which CSS breakpoint it falls into.

Question 7

What does colour depth mean?

Accepted Answer

Colour depth indicates how many bits are used to represent each pixel's colour. 24-bit colour (8 bits per channel — red, green, blue) gives 16.7 million colours. 30-bit colour (10 bits per channel) gives over 1 billion colours and is common on professional displays like the MacBook Pro and Apple Pro Display XDR.

Question 8

Is this tool free to use?

Accepted Answer

Yes, completely free with no sign-up, no tracking cookies, and no ads. This tool runs entirely in your browser — no data is sent to any server. You can copy your results to share with colleagues or paste into bug reports.

What Is My Screen Resolution?

Frequently Asked Questions

Audit your site at any viewport