Viewport Size Calculator Free Online Tool 2026

Last updated March 22, 2026

What Is a Viewport?

The viewport is the visible area of a web page in the browser window. It differs from screen resolution because browser chrome (toolbars, address bars) reduces available space. The Viewport Size Calculator shows CSS pixel dimensions, device pixel ratios, and which media queries trigger for hundreds of common devices.

Common Device Viewport Sizes

Device                    CSS Width  CSS Height  DPR  Physical Resolution
--------------------      ---------  ----------  ---  -------------------
iPhone SE (3rd gen)       375px      667px       2x   750 × 1334
iPhone 14                 390px      844px       3x   1170 × 2532
iPhone 14 Pro Max         430px      932px       3x   1290 × 2796
Samsung Galaxy S23        360px      780px       3x   1080 × 2340
Google Pixel 8            412px      915px       2.6x 1080 × 2400
iPad (10th gen)           820px      1180px      2x   1640 × 2360
iPad Pro 12.9"            1024px     1366px      2x   2048 × 2732
MacBook Air 13"           1280px     800px       2x   2560 × 1600
MacBook Pro 16"           1728px     1117px      2x   3456 × 2234
Full HD Monitor           1920px     1080px      1x   1920 × 1080
4K Monitor                3840px     2160px      1x   3840 × 2160

CSS Media Query Breakpoints

Standard breakpoints and which devices trigger them:

/* Extra small — phones portrait */
@media (max-width: 575px) {
  /* iPhone SE: 375px ✓ triggers */
  /* iPhone 14: 390px ✓ triggers */
}

/* Small — phones landscape / small tablets */
@media (min-width: 576px) and (max-width: 767px) {
  /* iPhone 14 landscape: 844px ✗ does not trigger */
  /* Most phones in landscape: ~667–932px ✗ */
}

/* Medium — tablets portrait */
@media (min-width: 768px) and (max-width: 991px) {
  /* iPad 10th gen portrait: 820px ✓ triggers */
}

/* Large — tablets landscape / small laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  /* iPad Pro 12.9" portrait: 1024px ✓ triggers */
}

/* Extra large — desktops */
@media (min-width: 1200px) {
  /* MacBook Air: 1280px ✓ triggers */
  /* Full HD: 1920px ✓ triggers */
}

Device Pixel Ratio (DPR) Explained

DPR = Physical pixels / CSS pixels

iPhone 14 (DPR 3):
  CSS viewport:     390 × 844 px
  Physical screen:  1170 × 2532 px
  1 CSS pixel = 3×3 = 9 physical pixels

Implications for images:
  A 390px-wide CSS image on iPhone 14 needs:
  390 × 3 = 1170px wide image for crisp rendering

  Using srcset for responsive images:
  <img
    src="hero-390.jpg"
    srcset="hero-390.jpg 1x, hero-780.jpg 2x, hero-1170.jpg 3x"
    width="390"
    alt="Hero image"
  />

Viewport Meta Tag

Without viewport meta tag:
  Mobile browsers render at ~980px wide (desktop width)
  Then scale down to fit the screen
  Text appears tiny, users must zoom

With viewport meta tag:
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  iPhone 14: renders at 390px CSS width ✓
  Media queries work correctly ✓
  Text is readable without zooming ✓

Common viewport configurations:
  <!-- Standard responsive -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Prevent user zoom (accessibility concern — use carefully) -->
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <!-- Fixed width (not recommended for responsive design) -->
  <meta name="viewport" content="width=1200">

Viewport Units in CSS

/* vw = 1% of viewport width */
/* vh = 1% of viewport height */
/* vmin = 1% of smaller dimension */
/* vmax = 1% of larger dimension */

/* Full-screen hero section */
.hero {
  width: 100vw;
  height: 100vh;
}

/* On iPhone 14 (390 × 844 CSS px):
   width:  100vw = 390px
   height: 100vh = 844px */

/* On Full HD (1920 × 1080):
   width:  100vw = 1920px
   height: 100vh = 1080px */

/* Fluid typography */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* iPhone 14: 4vw = 15.6px → clamped to 24px (1.5rem) */
  /* Full HD:   4vw = 76.8px → clamped to 48px (3rem) */
}

Testing Viewport Sizes in Browser DevTools

Chrome DevTools device emulation:
  1. Open DevTools (F12)
  2. Click "Toggle device toolbar" (Ctrl+Shift+M)
  3. Select device from dropdown or enter custom dimensions

Exact viewport dimensions for popular devices:
  iPhone 14:          390 × 844
  iPhone 14 Pro Max:  430 × 932
  Samsung Galaxy S23: 360 × 780
  iPad (10th gen):    820 × 1180 (portrait)
  iPad Pro 12.9":     1024 × 1366 (portrait)

Set DPR in DevTools:
  In device toolbar → "More options" → "Device pixel ratio"
  Set to 3 for iPhone 14 Pro simulation

Orientation Changes

iPhone 14 viewport dimensions:
  Portrait:  390 × 844 CSS px
  Landscape: 844 × 390 CSS px

Media query for orientation:
  @media (orientation: portrait) {
    /* 390px wide on iPhone 14 */
  }
  
  @media (orientation: landscape) {
    /* 844px wide on iPhone 14 — may trigger tablet breakpoints */
  }

Note: iPhone 14 in landscape (844px) triggers medium breakpoints
designed for tablets. Test both orientations.

Image Size Requirements by Device

Full-width image requirements:

Device              CSS Width  DPR  Required Image Width
------              ---------  ---  --------------------
iPhone SE           375px      2x   750px
iPhone 14           390px      3x   1170px
Samsung Galaxy S23  360px      3x   1080px
iPad 10th gen       820px      2x   1640px
MacBook Air         1280px     2x   2560px
Full HD Monitor     1920px     1x   1920px

Recommended approach: provide 2x images as minimum
Most modern devices have DPR ≥ 2

Common Use Cases

• Designing responsive breakpoints that cover your actual user devices
• Determining correct image sizes for srcset attributes
• Configuring browser DevTools for accurate device testing
• Understanding why layouts break on specific devices
• Planning CSS viewport unit usage (vw, vh, vmin, vmax)