Difference between Viewport and Resolution

What Is a Pixel?

A pixel is the smallest addressable unit of any digital display — a single point of light that carries color information. Every image, every line of text, and every UI element on your screen is composed of thousands or millions of these tiny colored squares arranged in a precise grid.

On its own, a pixel has no fixed physical size. A pixel on a 75-inch television is far larger than a pixel on a 6-inch smartphone screen. What determines display sharpness is not the number of pixels alone, but how densely those pixels are packed — which leads directly to screen resolution and pixel density.

Screen Resolution — The Total Count of Pixels

Screen resolution is the total number of pixels on a display, expressed as width × height. A screen resolution of 1080 × 2400 means the panel contains 1,080 horizontal pixels and 2,400 vertical pixels — over 2.5 million physical pixels in total.

A higher screen resolution means more detail and sharper text, but only relative to the physical screen size. A 1080p resolution on a 65-inch TV appears noticeably softer than the same resolution on a 5-inch smartphone, because the same pixel count is distributed over a much larger physical area. This is why screen size and resolution must always be considered together.

The ratio of pixels to physical area is what defines pixel density.

Pixels Per Inch (PPI) — Screen Sharpness Explained

Pixels Per Inch (PPI) measures how many pixels fit within one inch of the screen, calculated from the diagonal pixel count divided by the diagonal screen size in inches. PPI is the most direct measurement of display sharpness.

Standard desktop monitors typically land around 90–110 PPI. Most modern smartphones exceed 400 PPI, with flagship devices pushing 460–500 PPI. Apple's Retina display technology was specifically engineered to reach a PPI threshold where individual pixels become imperceptible to the human eye at a typical viewing distance.

For web developers, PPI has a practical consequence: a CSS property like font-size: 16px behaves very differently on a 96 PPI desktop monitor than on a 460 PPI mobile screen. Without a scaling mechanism, all web content would render at microscopic sizes on high-density displays. That scaling mechanism is the device pixel ratio.

What Is a Viewport?

The viewport is the visible area of a webpage inside the browser window — the region where your HTML layout and CSS styles are rendered. When you write a CSS media query like @media (max-width: 768px), you are targeting the viewport width, not the physical screen resolution.

On desktop, the viewport resizes whenever the user changes the browser window size. On mobile devices, the viewport typically matches the full screen width. This is the pixel value that governs your responsive breakpoints and layout calculations.

The most important thing to understand about viewport size: it is measured in CSS pixels, not physical pixels. These are two different units, and that difference is precisely what allows a single responsive CSS layout to work across hundreds of devices with wildly different screen resolutions.

CSS Pixel Ratio — The Bridge Between Physical and Logical Pixels

The Device Pixel Ratio (DPR) — also called CSS pixel ratio — is the multiplier that maps physical screen pixels to logical CSS pixels. It answers the question: how many physical pixels equal one CSS pixel on this specific device?

On a standard 1× display such as most desktop monitors, one CSS pixel corresponds to one physical pixel, giving a DPR of 1.0. On modern smartphones, DPR values of 2.0, 2.625, 3.0, and 3.5 are common. A DPR of 3.0 means the device uses nine physical pixels (3×3) to render a single CSS pixel, producing a sharper result without changing the logical layout dimensions.

The relationship is expressed as: Viewport Size = Screen Resolution ÷ Device Pixel Ratio.

For example, a phone with a 1080 × 2400 screen resolution and a DPR of 2.625 produces a viewport of approximately 412 × 915 CSS pixels. Your stylesheet sees a 412px-wide canvas — not 1080px — which keeps layouts from rendering at unusably small sizes on high-resolution displays.

How Screen Resolution, Viewport Size, and DPR Work Together

Here is a clear breakdown of how all four display concepts relate:

• Screen Resolution is the hardware specification — the raw physical pixel count of the display panel.
• PPI (Pixels Per Inch) measures how densely those physical pixels are packed per inch of screen.
• Device Pixel Ratio (DPR) is the OS-level scaling factor that converts physical pixels into CSS pixels.
• Viewport Size is the logical pixel grid that CSS and JavaScript interact with, after DPR scaling is applied.

When a browser renders a page on a mobile device, it does not operate at the native screen resolution. It works within the viewport dimensions. The operating system then maps each CSS pixel to the appropriate number of physical pixels, producing a sharp, correctly-sized result across all screen densities.

A practical example: the Google Pixel 6 and Google Pixel 6 Pro share the same viewport width of 412 CSS pixels, making them appear identical to CSS. Yet the Pixel 6 Pro has a 1440 × 3120 screen resolution with a DPR of 3.5, while the standard Pixel 6 has a 1080 × 2400 resolution with a DPR of 2.625. Same viewport — very different hardware.

Why Viewport Size and Resolution Matter for Web Developers

In CSS and responsive web design, you always write media queries against the viewport size in CSS pixels — never against the physical screen resolution. A breakpoint at max-width: 480px activates on any device whose viewport is 480 CSS pixels wide or narrower, regardless of whether the device's physical resolution is 1080px or 1440px.

For images, however, physical resolution matters significantly. An image rendered at 200 CSS pixels looks crisp on a 1× display, but appears soft on a 3× high-density screen because the browser must scale a 200px image up to 600 physical pixels. This is why responsive image techniques — srcset attributes, image-set() in CSS, and scalable SVGs — are standard practice for retina-quality web design.

Use the min-resolution or -webkit-min-device-pixel-ratio media features to serve high-resolution assets to retina screens:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
  /* High-resolution / retina display styles here */
}

Real Device Viewport Sizes and Resolutions

The following popular devices show how viewport size, screen resolution, DPR, and pixel density relate in practice:

• Samsung Galaxy S25 (2025)
  Resolution: 1080 × 2340  |  DPR: 3.0  |  Viewport: 360 × 780  |  PPI: ~416
• Google Pixel 9 Pro (2024)
  Resolution: 1280 × 2856  |  DPR: 3.0  |  Viewport: 427 × 952  |  PPI: ~495
• Apple iPhone 16 Pro (2024)
  Resolution: 1206 × 2622  |  DPR: 3.0  |  Viewport: 402 × 874  |  PPI: ~460
• Apple iPad Pro 11" M4 (2024)
  Resolution: 2420 × 1668  |  DPR: 2.0  |  Viewport: 1210 × 834  |  PPI: ~264
• MacBook Air 13" M4 (2025)
  Resolution: 2560 × 1664  |  DPR: 2.0  |  Viewport: 1280 × 832  |  PPI: ~224

The iPad and MacBook each use a DPR of 2.0, so their viewport is exactly half their native resolution in both dimensions. The smartphones, running at DPR 3.0, have viewport widths between 360–427 CSS pixels despite physical resolutions of 1080–1280px — a difference that would completely break any layout relying on raw pixel counts.

Summary: Viewport vs Resolution

Screen resolution is the physical hardware specification. Viewport size is the logical CSS canvas your stylesheet works with. Device pixel ratio is the conversion factor connecting the two. PPI tells you how visually sharp the display is. All four values are linked, but each answers a different question — and knowing which one to use will make your CSS media queries accurate, your images sharp on every screen, and your responsive layouts reliable across any device.

Disclaimer: Information collected from different top relevant websites. It is tried to keep the information correct.
If you find anything wrong email us [email protected]