# Viewport sizes cheat sheet: phones to desktops

> Viewport sizes in CSS pixels, screenshot sizes and device pixel ratios of iPhone, Pixel, Galaxy, iPad and laptop screens, drawn to scale, and the sizes to test.

Cheat sheet by Serghei Pogor, founder of CurlShot (https://curlshot.com/about/serghei-pogor). Published 15 October 2026. Page for people: https://curlshot.com/blog/viewport-sizes-cheat-sheet

Phone viewports are 360 to 448 CSS pixels wide (iPhone 15 and 16: 393 x 852, Galaxy S24: 360 x 780), tablets in portrait are 744 to 1024 wide (iPad: 820 x 1180), and laptops and desktops start at 1280 (1366 x 768, 1440 x 900, 1920 x 1080). The physical size is the viewport multiplied by the device pixel ratio: 393 x 852 at a ratio of 3 is 1179 x 2556 pixels. A practical test set is 360, 393, 820, 1280, 1440 and 1920 pixels wide.

## Key facts

- A viewport is measured in CSS pixels, not in the pixels of the screen. An iPhone 15 Pro has a 393 x 852 viewport on a 1179 x 2556 pixel screen.
- Physical pixels = CSS pixels x device pixel ratio (DPR). A 390 pixel wide viewport at DPR 3 gives a 1170 pixel wide screenshot.
- Recent iPhones have a DPR of 3, iPads and MacBooks 2, Pixel phones 2.625 to 3, and an ordinary desktop monitor 1.
- The default breakpoints of Tailwind CSS are 640, 768, 1024, 1280 and 1536 pixels; those of Bootstrap 5.3 are 576, 768, 992, 1200 and 1400.
- Every phone in this sheet is narrower than the first breakpoint of both frameworks (640 and 576), so all of them get the base, unprefixed styles.
- CurlShot offers 43 device presets through one option, viewport_device, and the table on this page is generated from that list.

## Viewport sizes to scale

Viewports of common devices, in CSS pixels, by kind of device. Phones and tablets are in portrait.

| Device | Viewport (CSS px) | Kind |
| --- | --- | --- |
| Galaxy S24 | 360 x 780 | Phone |
| iPhone SE | 375 x 667 | Phone |
| iPhone 15 Pro | 393 x 852 | Phone |
| iPhone 16 Pro Max | 440 x 956 | Phone |
| iPad mini | 744 x 1133 | Tablet |
| iPad | 820 x 1180 | Tablet |
| iPad Pro 13" | 1024 x 1366 | Tablet |
| Desktop HD | 1280 x 720 | Desktop |
| Laptop | 1366 x 768 | Laptop |
| MacBook Air 13" | 1440 x 900 | Laptop |
| Full HD | 1920 x 1080 | Desktop |

Phones are 360 to 448 CSS pixels wide, tablets 744 to 1024, laptops and desktops 1280 to 3840.

## CSS pixels, physical pixels and device pixel ratio

A CSS pixel is a unit of layout. A physical pixel is one dot of the screen. The device pixel ratio (DPR) says how many physical pixels draw one CSS pixel along one side.

```
physical pixels = CSS pixels x DPR
```

- DPR 1: one CSS pixel is 1 physical pixel.
- DPR 2: one CSS pixel is a 2 x 2 block, 4 physical pixels.
- DPR 3: one CSS pixel is a 3 x 3 block, 9 physical pixels.

A screenshot is saved in physical pixels, so its size is the viewport multiplied by the DPR. A 390 pixel wide viewport at DPR 3 gives a 1170 pixel wide image.

| Device | Viewport (CSS px) | DPR | Screenshot of one screen (px) |
| --- | --- | --- | --- |
| iPhone 14 | 390 x 844 | 3 | 1170 x 2532 |
| iPhone 15 Pro | 393 x 852 | 3 | 1179 x 2556 |
| Pixel 8 | 412 x 915 | 2.625 | 1082 x 2402 |
| iPad (10th gen) | 820 x 1180 | 2 | 1640 x 2360 |
| MacBook Air 13" | 1440 x 900 | 2 | 2880 x 1800 |
| Desktop Full HD (1920 x 1080) | 1920 x 1080 | 1 | 1920 x 1080 |

The rendered size is not always the size of the panel. Apple lists the iPhone 15 Pro at 2556 by 1179 pixels, exactly 393 x 852 times 3. It lists the iPhone 13 mini at 2340 by 1080 pixels, while its 375 x 812 viewport at DPR 3 renders 1125 x 2436 pixels, which the phone scales down to fit.

The screen is also not the viewport. For the iPhone 15, the Playwright descriptor gives a 393 x 852 screen and a 393 x 659 viewport: the browser's own bars take the other 193 pixels of height. The table below uses the whole screen as the viewport, as the presets do.

## Viewport size table: 43 devices

Every row is a preset of the `viewport_device` option of CurlShot. Viewports are in CSS pixels, in portrait for phones and tablets. Screenshot size = viewport x DPR, rounded.

| Device | Preset name | Viewport (CSS px) | Screenshot size (px) | DPR | Aspect ratio | Category |
| --- | --- | --- | --- | --- | --- | --- |
| iPhone SE | `iphone_se` | 375 x 667 | 750 x 1334 | 2 | 16:9 | Phone |
| iPhone 12 | `iphone_12` | 390 x 844 | 1170 x 2532 | 3 | 19.5:9 | Phone |
| iPhone 13 | `iphone_13` | 390 x 844 | 1170 x 2532 | 3 | 19.5:9 | Phone |
| iPhone 13 mini | `iphone_13_mini` | 375 x 812 | 1125 x 2436 | 3 | 19.5:9 | Phone |
| iPhone 14 | `iphone_14` | 390 x 844 | 1170 x 2532 | 3 | 19.5:9 | Phone |
| iPhone 14 Plus | `iphone_14_plus` | 428 x 926 | 1284 x 2778 | 3 | 19.5:9 | Phone |
| iPhone 14 Pro | `iphone_14_pro` | 393 x 852 | 1179 x 2556 | 3 | 19.5:9 | Phone |
| iPhone 14 Pro Max | `iphone_14_pro_max` | 430 x 932 | 1290 x 2796 | 3 | 19.5:9 | Phone |
| iPhone 15 | `iphone_15` | 393 x 852 | 1179 x 2556 | 3 | 19.5:9 | Phone |
| iPhone 15 Plus | `iphone_15_plus` | 430 x 932 | 1290 x 2796 | 3 | 19.5:9 | Phone |
| iPhone 15 Pro | `iphone_15_pro` | 393 x 852 | 1179 x 2556 | 3 | 19.5:9 | Phone |
| iPhone 15 Pro Max | `iphone_15_pro_max` | 430 x 932 | 1290 x 2796 | 3 | 19.5:9 | Phone |
| iPhone 16 | `iphone_16` | 393 x 852 | 1179 x 2556 | 3 | 19.5:9 | Phone |
| iPhone 16 Plus | `iphone_16_plus` | 430 x 932 | 1290 x 2796 | 3 | 19.5:9 | Phone |
| iPhone 16 Pro | `iphone_16_pro` | 402 x 874 | 1206 x 2622 | 3 | 19.5:9 | Phone |
| iPhone 16 Pro Max | `iphone_16_pro_max` | 440 x 956 | 1320 x 2868 | 3 | 19.5:9 | Phone |
| Pixel 5 | `pixel_5` | 393 x 851 | 1081 x 2340 | 2.75 | 19.5:9 | Phone |
| Pixel 7 | `pixel_7` | 412 x 915 | 1082 x 2402 | 2.625 | 20:9 | Phone |
| Pixel 8 | `pixel_8` | 412 x 915 | 1082 x 2402 | 2.625 | 20:9 | Phone |
| Pixel 8 Pro | `pixel_8_pro` | 448 x 998 | 1344 x 2994 | 3 | 20:9 | Phone |
| Pixel 9 | `pixel_9` | 412 x 923 | 1082 x 2423 | 2.625 | 2.24:1 | Phone |
| Pixel 9 Pro | `pixel_9_pro` | 410 x 914 | 1230 x 2742 | 3 | 20:9 | Phone |
| Galaxy S23 | `galaxy_s23` | 360 x 780 | 1080 x 2340 | 3 | 19.5:9 | Phone |
| Galaxy S24 | `galaxy_s24` | 360 x 780 | 1080 x 2340 | 3 | 19.5:9 | Phone |
| Galaxy S24 Ultra | `galaxy_s24_ultra` | 384 x 824 | 1152 x 2472 | 3 | 2.15:1 | Phone |
| Galaxy A54 | `galaxy_a54` | 360 x 800 | 1080 x 2400 | 3 | 20:9 | Phone |
| iPad (10th gen) | `ipad` | 820 x 1180 | 1640 x 2360 | 2 | 1.44:1 | Tablet |
| iPad mini | `ipad_mini` | 744 x 1133 | 1488 x 2266 | 2 | 1.52:1 | Tablet |
| iPad Air | `ipad_air` | 820 x 1180 | 1640 x 2360 | 2 | 1.44:1 | Tablet |
| iPad Pro 11" | `ipad_pro_11` | 834 x 1194 | 1668 x 2388 | 2 | 1.43:1 | Tablet |
| iPad Pro 13" | `ipad_pro_13` | 1024 x 1366 | 2048 x 2732 | 2 | 4:3 | Tablet |
| Galaxy Tab S9 | `galaxy_tab_s9` | 800 x 1280 | 1600 x 2560 | 2 | 16:10 | Tablet |
| Pixel Tablet | `pixel_tablet` | 800 x 1280 | 1600 x 2560 | 2 | 16:10 | Tablet |
| MacBook Air 13" | `macbook_air_13` | 1440 x 900 | 2880 x 1800 | 2 | 16:10 | Laptop |
| MacBook Pro 14" | `macbook_pro_14` | 1512 x 982 | 3024 x 1964 | 2 | 1.54:1 | Laptop |
| MacBook Pro 16" | `macbook_pro_16` | 1728 x 1117 | 3456 x 2234 | 2 | 1.55:1 | Laptop |
| Laptop (1366 x 768) | `laptop_hd` | 1366 x 768 | 1366 x 768 | 1 | 16:9 | Laptop |
| Laptop HiDPI (1440 x 900 @2x) | `laptop_hidpi` | 1440 x 900 | 2880 x 1800 | 2 | 16:10 | Laptop |
| Desktop HD (1280 x 720) | `desktop_hd` | 1280 x 720 | 1280 x 720 | 1 | 16:9 | Desktop |
| Desktop Full HD (1920 x 1080) | `desktop_full_hd` | 1920 x 1080 | 1920 x 1080 | 1 | 16:9 | Desktop |
| Desktop QHD (2560 x 1440) | `desktop_qhd` | 2560 x 1440 | 2560 x 1440 | 1 | 16:9 | Desktop |
| Desktop 4K (3840 x 2160) | `desktop_4k` | 3840 x 2160 | 3840 x 2160 | 1 | 16:9 | Desktop |
| iMac 24" | `imac_24` | 2240 x 1260 | 4480 x 2520 | 2 | 16:9 | Desktop |

The iPhone, Pixel 5, Pixel 7, Pixel 8, Galaxy S24 and iPad Pro 11" rows match the screen sizes and pixel ratios in Playwright's device descriptors. Four rows differ from that catalogue:

| Device | This sheet | Playwright descriptor |
| --- | --- | --- |
| Pixel 8 Pro | 448 x 998 at 3 | 448 x 997 at 3 |
| Pixel 9 | 412 x 923 at 2.625 | 360 x 808 at 3 |
| Pixel 9 Pro | 410 x 914 at 3 | 427 x 952 at 3 |
| Galaxy Tab S9 | 800 x 1280 at 2 | 640 x 1024 at 2.5 |

When the exact number matters, read `window.innerWidth`, `window.innerHeight` and `window.devicePixelRatio` on the device itself.

## Devices against Tailwind and Bootstrap breakpoints

Tailwind CSS (v4.3 defaults): sm 640, md 768, lg 1024, xl 1280, 2xl 1536 pixels. Each applies at that width and above.

| Viewport width (CSS px) | Tailwind prefix in effect | Presets | Preset widths |
| --- | --- | --- | --- |
| 0 to 639 | base | 26 | 360, 375, 384, 390, 393, 402, 410, 412, 428, 430, 440, 448 |
| 640 to 767 | sm | 1 | 744 |
| 768 to 1023 | md | 5 | 800, 820, 834 |
| 1024 to 1279 | lg | 1 | 1024 |
| 1280 to 1535 | xl | 5 | 1280, 1366, 1440, 1512 |
| 1536 and up | 2xl | 5 | 1728, 1920, 2240, 2560, 3840 |

Bootstrap 5.3: sm 576, md 768, lg 992, xl 1200, xxl 1400 pixels.

| Viewport width (CSS px) | Bootstrap breakpoint in effect | Presets | Preset widths |
| --- | --- | --- | --- |
| 0 to 575 | xs | 26 | 360, 375, 384, 390, 393, 402, 410, 412, 428, 430, 440, 448 |
| 576 to 767 | sm | 1 | 744 |
| 768 to 991 | md | 5 | 800, 820, 834 |
| 992 to 1199 | lg | 1 | 1024 |
| 1200 to 1399 | xl | 2 | 1280, 1366 |
| 1400 and up | xxl | 8 | 1440, 1512, 1728, 1920, 2240, 2560, 3840 |

Breakpoints are best chosen from the content, not from a list of devices: start with the small screen and add a breakpoint where the layout stops working.

## Which viewport sizes to test: the short set

| Viewport (CSS px) | Stands for | Why it is in the set |
| --- | --- | --- |
| 360 x 800 | Small Android phone (Galaxy S23, S24 and A54 are 360 wide) | 360 is the narrowest width of all the presets in this sheet. Text that overflows, a table that is too wide or a button row that wraps shows up here first. |
| 393 x 852 | Current iPhone (iPhone 14 Pro, 15, 15 Pro and 16) | Four iPhone presets and the Pixel 5 share the 393 width, and 390 and 402 sit within 9 pixels of it. One capture here stands for the middle of the phone range. |
| 820 x 1180 | Tablet in portrait (iPad 10th generation, iPad Air) | 820 falls between the md and lg breakpoints of both Tailwind (768 and 1024) and Bootstrap (768 and 992), so it is the size that shows the in-between layout a phone and a laptop never do. |
| 1280 x 720 | Small laptop or a browser window that is not maximized | 1280 is exactly the xl breakpoint of Tailwind and the viewport of the desktop browser descriptors in Playwright. A layout that only just switches to its desktop form is tested at its edge. |
| 1440 x 900 | Laptop (MacBook Air 13" and other HiDPI laptops) | 1440 is above the largest Bootstrap breakpoint (1400) and below the largest Tailwind one (1536): the common "full desktop layout, not yet extra wide" case. |
| 1920 x 1080 | Full HD desktop monitor | 1920 is wider than every default breakpoint of both frameworks, so it shows whether the content stops at a maximum width or stretches into lines too long to read. |

Add each of your own breakpoints, at the breakpoint and one pixel below it (767 and 768, 1023 and 1024): that is where a layout flips.

## Screenshot a page at any of these sizes

| Option | What it does | Values |
| --- | --- | --- |
| `viewport_width` | Width of the viewport in CSS pixels. | 100 to 3840, default 1280 |
| `viewport_height` | Height of the viewport in CSS pixels. | 100 to 4320, default 1024 |
| `device_scale_factor` | The device pixel ratio. It multiplies the size of the image. | 1 to 3, default 1 |
| `viewport_device` | A named preset: sets width, height, device pixel ratio, mobile layout, touch and user agent in one go. | any name in the table above |
| `viewport_mobile` | Treats the page as a phone does, so the viewport meta tag of the page is respected. | true or false, default false |
| `viewport_landscape` | Turns a portrait viewport on its side. | true or false, default false |

```bash
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&viewport_device=iphone_15_pro" \
  --output phone.png
```

The result is a 1179 x 2556 pixel PNG of the mobile layout. To set the numbers yourself:

```bash
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&viewport_width=360&viewport_height=800&viewport_mobile=true&device_scale_factor=2" \
  --output small-phone.png
```

That one is 720 x 1600 pixels. More: [device presets](https://curlshot.com/docs/devices), [screenshot a website as a phone shows it](https://curlshot.com/tools/mobile-screenshot).

## Glossary

- **Viewport**: The area of the browser window that a web page is drawn in. Toolbars, tabs and the address bar (the browser chrome) are not part of it. Its size is measured in CSS pixels and it is what media queries respond to.
- **CSS pixel**: The unit px in CSS, defined as exactly 1/96 of a CSS inch. It is a unit of layout, not a dot on the screen: one CSS pixel is drawn with one, four, nine or some other number of physical pixels, depending on the screen.
- **Physical pixel (device pixel)**: One dot of the screen itself, the smallest thing the hardware can light. The physical pixels of a screen are counted by its resolution.
- **Device pixel ratio (DPR)**: The ratio of the resolution in physical pixels to the resolution in CSS pixels: how many physical pixels are used to draw one CSS pixel along one side. 1 is a classic 96 DPI display, 2 is expected for HiDPI and Retina displays. A page reads it from window.devicePixelRatio.
- **Resolution**: The number of physical pixels of a screen, written width by height. Apple lists the iPhone 15 Pro at 2556 by 1179 pixels, which is its 393 x 852 viewport multiplied by 3.
- **Layout viewport**: The area the page is laid out in: the space inside window.innerWidth and window.innerHeight. It does not change when the reader pinches to zoom.
- **Visual viewport**: The part of the page that is visible right now. It leaves out the on-screen keyboard and whatever is outside a pinch-zoom, so it is the same size as the layout viewport or smaller.
- **Viewport meta tag**: The tag <meta name="viewport" content="width=device-width"> in the head of a page. Without it, mobile browsers lay the page out in a virtual viewport that is typically 980 pixels wide and shrink the result to fit the screen.
- **Breakpoint**: A viewport width at which a media query is introduced and the layout changes, for example from one column to two.

## Questions

### What is the viewport size of an iPhone?

It depends on the model. iPhone SE: 375 x 667. iPhone 13 mini: 375 x 812. iPhone 12, 13 and 14: 390 x 844. iPhone 14 Pro, 15, 15 Pro and 16: 393 x 852. iPhone 14 Plus: 428 x 926. iPhone 14 Pro Max, 15 Plus, 15 Pro Max and 16 Plus: 430 x 932. iPhone 16 Pro: 402 x 874. iPhone 16 Pro Max: 440 x 956. All are in CSS pixels, in portrait, with a device pixel ratio of 3 (2 for the iPhone SE).

### What is the difference between viewport size and screen resolution?

The viewport size is measured in CSS pixels and decides the layout of a page. The screen resolution counts physical pixels and decides how sharp it looks. The two are linked by the device pixel ratio: resolution = viewport x DPR. An iPad with an 820 x 1180 viewport and a DPR of 2 has a 1640 x 2360 pixel screen.

### What is device pixel ratio?

Device pixel ratio (DPR) is the number of physical pixels used to draw one CSS pixel along one side. At a DPR of 2, one CSS pixel is a 2 x 2 block of 4 physical pixels; at 3 it is a 3 x 3 block of 9. A page can read the value from window.devicePixelRatio.

### Which screen sizes should I test a responsive website at?

Six widths make a practical set: 360 (small phone), 393 (current iPhone), 820 (tablet in portrait), 1280 (small laptop), 1440 (laptop) and 1920 (Full HD desktop). Add each of your own breakpoints, tested at the breakpoint and one pixel below it, because that is where a layout flips.

### Why is my phone screenshot bigger than the viewport?

Because a screenshot is saved in physical pixels. A phone with a 393 x 852 viewport and a device pixel ratio of 3 produces a 1179 x 2556 pixel image, nine times as many pixels as the viewport numbers suggest. The layout is the same; only the sharpness changes.

### Do media queries use CSS pixels or physical pixels?

CSS pixels. A rule such as @media (width >= 768px) compares against the width of the viewport in CSS pixels, so a phone with a 1179 pixel wide screen and a 393 pixel wide viewport still gets the phone layout.

### How do I take a screenshot at a specific viewport size with CurlShot?

Send viewport_width and viewport_height in CSS pixels and, for a sharper image, device_scale_factor from 1 to 3. Or send viewport_device with a preset name such as iphone_15_pro, which sets the size, the pixel ratio, the mobile layout and the user agent together.

## Sources

1. Microsoft Playwright on GitHub, "deviceDescriptorsSource.json (device descriptors)": https://raw.githubusercontent.com/microsoft/playwright/main/packages/isomorphic/deviceDescriptorsSource.json (checked 11 October 2026)
2. MDN Web Docs, "Window: devicePixelRatio property": https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio (checked 11 October 2026)
3. MDN Web Docs, "Viewport concepts": https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts (checked 11 October 2026)
4. MDN Web Docs, "CSS pixel (glossary)": https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel (checked 11 October 2026)
5. MDN Web Docs, "Responsive web design": https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design (checked 11 October 2026)
6. Tailwind CSS, "Responsive design (default breakpoints, v4.3)": https://tailwindcss.com/docs/responsive-design (checked 11 October 2026)
7. Bootstrap, "Breakpoints (v5.3)": https://getbootstrap.com/docs/5.3/layout/breakpoints/ (checked 11 October 2026)
8. Apple Support, "iPhone 15 Pro, technical specifications": https://support.apple.com/en-us/111829 (checked 11 October 2026)
9. Apple Support, "iPhone 13 mini, technical specifications": https://support.apple.com/en-us/111873 (checked 11 October 2026)
10. web.dev (Google), "Responsive web design basics": https://web.dev/articles/responsive-web-design-basics (checked 11 October 2026)

## Go deeper

- [Screenshot a website as a phone shows it](https://curlshot.com/tools/mobile-screenshot)
- [Docs: device presets](https://curlshot.com/docs/devices)
- [Screenshot a website as a tablet shows it](https://curlshot.com/tools/tablet-screenshot)
- [High-resolution screenshots](https://curlshot.com/tools/high-resolution-screenshot)

## Read next

- [Full-page screenshot on every device and browser](https://curlshot.com/blog/full-page-screenshot-every-device.md): Exact keys and menu names to screenshot a whole web page in Chrome, Firefox, Edge, Safari, iPhone, iPad and Android, checked against each vendor.
- [Why website screenshots look wrong, and the fixes](https://curlshot.com/blog/why-website-screenshots-look-wrong.md): A field guide to 11 ways a website screenshot goes wrong, from blank lazy images to cookie banners and cut-off pages, with the cause and the fix for each.
- [Social preview image sizes: the OG cheat sheet](https://curlshot.com/blog/social-preview-image-sizes.md): Open Graph image sizes for Facebook, LinkedIn, WhatsApp, iMessage, Discord, Slack and Google Discover, drawn to scale, with the tags and the fixes.