Skip to content
CurlShot
Cheat sheetBy 9 min read

Viewport sizes cheat sheet: phones, tablets and desktops

The size of the viewport in CSS pixels, the size in real pixels and the device pixel ratio of 43 phones, tablets, laptops and desktops, drawn to scale. Then the six sizes worth testing.

  • iPhone 15 Pro

    393 x 852

  • iPad

    820 x 1180

  • MacBook Air 13"

    1440 x 900

A phone, a tablet and a laptop at one scale. The numbers are viewports in CSS pixels.

How big are phone, tablet and desktop viewports, drawn to scale?

Phone viewports are 360 to 448 CSS pixels wide, tablet viewports in portrait are 744 to 1024, and laptop and desktop viewports run from 1280 to 3840. A Full HD desktop is more than five times as wide as a small phone (1920 / 360 = 5.3), which is the whole reason responsive layouts exist.

  • Phones
  • Tablets
  • Laptops and desktops

Phones

  1. Galaxy S24360 x 780
  2. iPhone SE375 x 667
  3. iPhone 15 Pro393 x 852
  4. iPhone 16 Pro Max440 x 956

Tablets

  1. iPad mini744 x 1133
  2. iPad820 x 1180
  3. iPad Pro 13"1024 x 1366

Laptops and desktops

  1. Desktop HD1280 x 720
  2. Laptop1366 x 768
  3. MacBook Air 13"1440 x 900
  4. Full HD1920 x 1080

0bar length = width, full bar = 1920 CSS px

11 viewports at one scale, all starting from the same top left corner. Phones and tablets are in portrait. Sizes are the device presets of CurlShot; the full list is in the table below.
Phones

360 to 448 px wide

Portrait, tall and narrow: about 19.5:9 or 20:9 on most models. Every one is below the first breakpoint of Tailwind and Bootstrap.

Tablets

744 to 1024 px wide

Portrait widths. Turned on its side, an 820 x 1180 iPad becomes 1180 x 820 and behaves like a small laptop.

Laptops and desktops

1280 px and up

Landscape, 16:9 or 16:10. The window is often smaller than the screen, so widths between these numbers are normal.

CSS pixels, physical pixels and device pixel ratio

The device pixel ratio (DPR) is the number of physical pixels a screen uses to draw one CSS pixel along one side[2]. A CSS pixel is the unit a layout is written in; a physical pixel is one dot of the screen. Multiply one by the ratio and you have the other.

  1. DPR 1

    1 x 1 = 1 physical pixel

  2. DPR 2

    2 x 2 = 4 physical pixels

  3. DPR 3

    3 x 3 = 9 physical pixels

One CSS pixel (dashed outline) on three kinds of screen. MDN describes a ratio of 1 as a classic 96 DPI display and 2 as what to expect from HiDPI and Retina displays[2].

physical pixels = CSS pixels x DPR

A screenshot is saved in physical pixels, so the same formula gives its size. A 390 pixel wide viewport at DPR 3 gives a 1170 pixel wide image (390 x 3). At DPR 3 the file holds nine times as many pixels as at DPR 1 (3 x 3), with the same layout and sharper text.

Layout only ever looks at CSS pixels. A media query for 768 pixels compares against the viewport, not the panel, so a phone whose screen is 1179 pixels wide still gets the phone layout.

Viewport, device pixel ratio and the size of a screenshot of one screen
DeviceViewport x DPRScreenshot (px)
iPhone 14390 x 844 x 31170 x 2532
iPhone 15 Pro393 x 852 x 31179 x 2556
Pixel 8412 x 915 x 2.6251082 x 2402
iPad820 x 1180 x 21640 x 2360
MacBook Air 13"1440 x 900 x 22880 x 1800
Desktop Full HD1920 x 1080 x 11920 x 1080

The rendered size is not always the panel

Apple lists the iPhone 15 Pro at 2556 by 1179 pixels[8], exactly 393 x 852 times 3. It lists the iPhone 13 mini at 2340 by 1080 pixels[9], while its 375 x 812 viewport at DPR 3 renders 1125 x 2436 pixels, which the phone then scales down to fit. A screenshot follows the rendered size.

The screen is not the viewport either

The browser's own bars are not part of the viewport[3]. For the iPhone 15, Playwright's descriptor gives a 393 x 852 screen and a 393 x 659 viewport[1]: 193 pixels of height go to the bars. This sheet uses the whole screen as the viewport, as the presets do.

Viewport size table for 43 devices

The table lists the viewport in CSS pixels, the size of a one-screen screenshot in pixels, the device pixel ratio and the aspect ratio of 43 devices. Phones and tablets are in portrait. The rows are generated from the device presets of CurlShot, so each one is a size you can capture by name.

Showing 43 devices: All

Viewport size, screenshot size, device pixel ratio and aspect ratio by device
DeviceViewport (CSS px)DPR
iPhone SEiphone_se375 x 667750 x 1334 px2
iPhone 12iphone_12390 x 8441170 x 2532 px3
iPhone 13iphone_13390 x 8441170 x 2532 px3
iPhone 13 miniiphone_13_mini375 x 8121125 x 2436 px3
iPhone 14iphone_14390 x 8441170 x 2532 px3
iPhone 14 Plusiphone_14_plus428 x 9261284 x 2778 px3
iPhone 14 Proiphone_14_pro393 x 8521179 x 2556 px3
iPhone 14 Pro Maxiphone_14_pro_max430 x 9321290 x 2796 px3
iPhone 15iphone_15393 x 8521179 x 2556 px3
iPhone 15 Plusiphone_15_plus430 x 9321290 x 2796 px3
iPhone 15 Proiphone_15_pro393 x 8521179 x 2556 px3
iPhone 15 Pro Maxiphone_15_pro_max430 x 9321290 x 2796 px3
iPhone 16iphone_16393 x 8521179 x 2556 px3
iPhone 16 Plusiphone_16_plus430 x 9321290 x 2796 px3
iPhone 16 Proiphone_16_pro402 x 8741206 x 2622 px3
iPhone 16 Pro Maxiphone_16_pro_max440 x 9561320 x 2868 px3
Pixel 5pixel_5393 x 8511081 x 2340 px2.75
Pixel 7pixel_7412 x 9151082 x 2402 px2.625
Pixel 8pixel_8412 x 9151082 x 2402 px2.625
Pixel 8 Propixel_8_pro448 x 9981344 x 2994 px3
Pixel 9pixel_9412 x 9231082 x 2423 px2.625
Pixel 9 Propixel_9_pro410 x 9141230 x 2742 px3
Galaxy S23galaxy_s23360 x 7801080 x 2340 px3
Galaxy S24galaxy_s24360 x 7801080 x 2340 px3
Galaxy S24 Ultragalaxy_s24_ultra384 x 8241152 x 2472 px3
Galaxy A54galaxy_a54360 x 8001080 x 2400 px3
iPad (10th gen)ipad820 x 11801640 x 2360 px2
iPad miniipad_mini744 x 11331488 x 2266 px2
iPad Airipad_air820 x 11801640 x 2360 px2
iPad Pro 11"ipad_pro_11834 x 11941668 x 2388 px2
iPad Pro 13"ipad_pro_131024 x 13662048 x 2732 px2
Galaxy Tab S9galaxy_tab_s9800 x 12801600 x 2560 px2
Pixel Tabletpixel_tablet800 x 12801600 x 2560 px2
MacBook Air 13"macbook_air_131440 x 9002880 x 1800 px2
MacBook Pro 14"macbook_pro_141512 x 9823024 x 1964 px2
MacBook Pro 16"macbook_pro_161728 x 11173456 x 2234 px2
Laptop (1366 x 768)laptop_hd1366 x 7681366 x 768 px1
Laptop HiDPI (1440 x 900 @2x)laptop_hidpi1440 x 9002880 x 1800 px2
Desktop HD (1280 x 720)desktop_hd1280 x 7201280 x 720 px1
Desktop Full HD (1920 x 1080)desktop_full_hd1920 x 10801920 x 1080 px1
Desktop QHD (2560 x 1440)desktop_qhd2560 x 14402560 x 1440 px1
Desktop 4K (3840 x 2160)desktop_4k3840 x 21603840 x 2160 px1
iMac 24"imac_242240 x 12604480 x 2520 px2

Under each device is its preset name. Screenshot size is the viewport multiplied by the DPR, rounded to whole pixels. Aspect ratio is the long side to the short side: the usual name where it is within 0.012 of one, a decimal otherwise.

How these numbers were checked

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 published device descriptors[1]. Four rows differ from that catalogue, shown here side by side. Catalogues of Android devices do not always agree, so when the exact number matters, read window.innerWidth, window.innerHeight and window.devicePixelRatio on the device itself.

Rows of this sheet that differ from the Playwright device descriptors
DeviceThis sheetPlaywright
Pixel 8 Pro448 x 998 at 3448 x 997 at 3
Pixel 9412 x 923 at 2.625360 x 808 at 3
Pixel 9 Pro410 x 914 at 3427 x 952 at 3
Galaxy Tab S9800 x 1280 at 2640 x 1024 at 2.5

Where do devices fall against Tailwind and Bootstrap breakpoints?

The default breakpoints of Tailwind CSS are 640, 768, 1024, 1280, 1536 pixels[6] and those of Bootstrap 5.3 are 576, 768, 992, 1200, 1400 pixels[7]. Each is a minimum width: its styles apply at that viewport width and above. Every phone in this sheet sits below the first one.

  • Phones
  • Tablets
  • Laptops and desktops
Each dot is a viewport width from the table, on a line from 300 to 2000 CSS pixels. Tailwind's breakpoints are above the line, Bootstrap's below. The 2240, 2560 and 3840 pixel desktops are off the right edge. On a small screen the line scrolls sideways.

Tailwind CSS ranges

Preset widths in each Tailwind CSS range
Width (CSS px)Prefix in effectPresets
0 to 639base26
640 to 767sm1
768 to 1023md5
1024 to 1279lg1
1280 to 1535xl5
1536 and up2xl5

Bootstrap ranges

Preset widths in each Bootstrap range
Width (CSS px)Breakpoint in effectPresets
0 to 575xs26
576 to 767sm1
768 to 991md5
992 to 1199lg1
1200 to 1399xl2
1400 and upxxl8

Pick breakpoints from the content, not from this list

Google's guidance is not to define breakpoints by device class, product or brand, but to start with the small screen and add a breakpoint where the layout stops working[10]. A sheet like this one is for testing a layout, not for designing it.

Which viewport sizes should you test?

Six viewport sizes make a practical test set: 360 x 800, 393 x 852, 820 x 1180, 1280 x 720, 1440 x 900, 1920 x 1080. Each one is there for a reason you can check against the table and the breakpoints above, not because of a popularity figure.

  1. 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.

  2. 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.

  3. 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.

  4. 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.[1]

  5. 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.

  6. 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.

Then add your own breakpoints, twice each

A layout flips exactly at a breakpoint, so test at the breakpoint and one pixel below it: 767 and 768, 1023 and 1024. A min-width rule such as Tailwind's @media (width >= 48rem) is off at 767 and on at 768[6].

How to screenshot a page at any viewport size

A screenshot at a given viewport needs three numbers: width, height and device pixel ratio. In the CurlShot API they are viewport_width, viewport_height and device_scale_factor, or one preset name in viewport_device.

A phone or tablet preset also turns on the mobile layout, touch and the device's user agent, which is what makes a site serve its phone version. Anything you send yourself wins over the preset. Without code, the mobile screenshot tool does the same from a pasted address, and the devices page of the docs covers landscape and overrides.

By preset: a 1179 x 2556 pixel PNG
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&viewport_device=iphone_15_pro" \
  --output phone.png
By numbers: a 720 x 1600 pixel PNG
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
Viewport options of the screenshot API
OptionWhat it doesValues
viewport_widthWidth of the viewport in CSS pixels.100 to 3840, default 1280
viewport_heightHeight of the viewport in CSS pixels.100 to 4320, default 1024
device_scale_factorThe device pixel ratio. It multiplies the size of the image.1 to 3, default 1
viewport_deviceA named preset: sets width, height, device pixel ratio, mobile layout, touch and user agent in one go.any name in the table above
viewport_mobileTreats the page as a phone does, so the viewport meta tag of the page is respected.true or false, default false
viewport_landscapeTurns a portrait viewport on its side.true or false, default false

Viewport glossary

Nine terms that get mixed up, each in one or two sentences, with the page it was checked against.

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.[3]
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.[4]
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.[2]
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.[8]
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.[3]
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.[3]
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.[3]
Breakpoint
A viewport width at which a media query is introduced and the layout changes, for example from one column to two.[5]

Questions people ask

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. [1]Microsoft Playwright on GitHub, deviceDescriptorsSource.json (device descriptors). Checked .
  2. [2]MDN Web Docs, Window: devicePixelRatio property. Checked .
  3. [3]MDN Web Docs, Viewport concepts. Checked .
  4. [4]MDN Web Docs, CSS pixel (glossary). Checked .
  5. [5]MDN Web Docs, Responsive web design. Checked .
  6. [6]Tailwind CSS, Responsive design (default breakpoints, v4.3). Checked .
  7. [7]Bootstrap, Breakpoints (v5.3). Checked .
  8. [8]Apple Support, iPhone 15 Pro, technical specifications. Checked .
  9. [9]Apple Support, iPhone 13 mini, technical specifications. Checked .
  10. [10]web.dev (Google), Responsive web design basics. Checked .

Go deeper

Read next

Screenshot any page in one step

Paste an address into CurlShot and download the screenshot. A free account gives you 100 screenshots every month. No card needed.

Try it freeSee the plans