Breakpoints

CSS breakpoints for iPhone and iPad

There is no official list of breakpoints for Apple devices, and you shouldn’t write one media query per device. It still helps to know which side of your breakpoints each iPhone and iPad falls on, because a few of them land in awkward places.

Updated 10 November 2026

Short answerThere are no official Apple breakpoints. iPhones in portrait are 375 to 440 px wide, below the first breakpoint of most frameworks. iPads in portrait run from 744 to 1032 px and sit either side of the usual 768 and 1024 px breakpoints: the iPad mini is below 768, and the iPad Air 13-inch is exactly 1024. Put breakpoints where your content needs them, then test one pixel either side.

Where each device lands

Widths are CSS pixels, full screen. Tailwind’s defaults are sm 640, md 768, lg 1024, xl 1280 and 2xl 1536. Bootstrap 5.3’s are sm 576, md 768, lg 992, xl 1200 and xxl 1400. Both are minimum widths.

Width	Device	Tailwind	Bootstrap
375 to 440	iPhones, portrait	base	xs
382	iPhone Duo, closed	base	xs
594	iPhone Duo, closed, landscape	base	sm
669	iPhone Duo, open, portrait	sm	sm
744, 756	iPad mini, portrait (previous and current)	sm	sm
820	iPad (A16) and iPad Air 11-inch, portrait	md	md
834	iPad Pro 11-inch, portrait	md	md
951	iPhone Duo, open, landscape	md	md
1024	iPad Air 13-inch, portrait	lg	lg
1032	iPad Pro 13-inch, portrait	lg	lg
1133, 1158	iPad mini, landscape	lg	lg
1180	iPad (A16) and iPad Air 11-inch, landscape	lg	lg
1210	iPad Pro 11-inch, landscape	lg	xl
1366, 1376	iPad Air and iPad Pro 13-inch, landscape	xl	xl

The device sizes are explained in iPhone viewport sizes, iPad viewport sizes and iPhone Duo viewport size. An iPhone in landscape is 667 to 956 px wide before Safari’s safe-area inset and only 375 to 440 px tall, so it can pick up a tablet layout with very little height to show it in.

The awkward spots

The iPad mini gets your phone layout. At 744 or 756 px in portrait it is below a 768 px breakpoint. That may be what you want, but decide it on purpose: a single-column phone layout stretched to 756 px often has very long lines.
1024 px is a real device. The iPad Air 13-inch and the older 12.9-inch iPad Pro are exactly 1024 px in portrait. min-width: 1024px and max-width: 1024px both match at that width, so if you use both, both sets of rules apply there. The range syntax avoids the overlap: @media (width < 1024px) and @media (width >= 1024px). Current browsers support it, including Safari from 16.4.
iPad landscape gets your desktop layout. From 1133 px up, most sites serve the full desktop design to a touch screen. Hover menus and small click targets are the usual failures.
669 px falls between 640 and 768. The open iPhone Duo is past Tailwind’s sm and short of md.
An iPad window can be any width. Split View narrows Safari, and on iPadOS 26 and later app windows can be resized freely, so an iPad can hit every breakpoint you have.

Choosing breakpoints

Let the content decide. Start narrow, widen the window until the layout looks wrong, and put a breakpoint there. web.dev’s advice is not to define breakpoints by device class, product or brand.
Framework defaults are a fine starting point. They are round numbers, not device sizes, and that is the point. Add your own where a component needs one.
Use container queries for components. A card that sits in a sidebar on one page and full width on another should respond to its container, not to the viewport.
Don’t target devices. Queries built on device-width or pixel ratio to single out one iPhone or iPad go stale with every new model, and device-width is deprecated.
Width is not input. A 1376 px viewport can be a touch screen and a 440 px one can have a mouse. Use hover and pointer media queries for that.

How to test a breakpoint

Test at the breakpoint and one pixel below it: 767 and 768, 1023 and 1024.
Test the real device widths that sit close to it: 744, 756 and 820 px around 768; 1024 and 1032 px around 1024.
Test both orientations. An iPad crosses at least one breakpoint when it rotates.
In desktop devtools, type the widths as custom sizes and don’t rely on dragging. On an iPhone or iPad, use a viewport app (below).

Testing breakpoints in ViewPortal

ViewPortal renders a page at an exact width you choose, so you can test either side of a breakpoint from an iPhone or iPad. The presets cover most of the device widths in the table (iPhone SE to iPhone 17 Pro Max, iPhone Duo, four iPads and six Macs), and custom sizes take any width from 200 to 4096 px, so you can save 767 and 768, or 1023 and 1024, and switch between them. A readout shows the width in use, and every preset flips between portrait and landscape.

On an iPad, or an iPhone in landscape, multi-view shows a phone, a tablet and a desktop width of the same page side by side, which makes a layout that switches at the wrong point easy to see. The limits: it doesn’t list a page’s media queries or edit CSS, and it shows WebKit’s rendering only. ViewPortal is free to download, with no accounts and no tracking. Multi-view, dev-server previews and the dev tools are in Pro, a one-time £4.99 unlock.

ViewPortal on the App Store

Questions people ask

What are the standard CSS breakpoints?

There is no standard. Common defaults are Tailwind’s 640, 768, 1024, 1280 and 1536 px and Bootstrap’s 576, 768, 992, 1200 and 1400 px. Choose breakpoints where your own content stops fitting.

What breakpoint is an iPad?

It depends on the model and orientation. In portrait, iPads are 744 to 1032 px wide: the iPad mini is below 768, the 11-inch models are 820 or 834, and the 13-inch models are 1024 or 1032. In landscape they are 1133 to 1376 px wide.

What breakpoint is an iPhone?

iPhones in portrait are 375 to 440 px wide, below the first breakpoint in Tailwind (640 px) and Bootstrap (576 px). The exception is the open iPhone Duo at 669 px.

Should I write media queries for specific devices?

No. Device-specific queries go out of date with every new model. Use fluid layouts with content-based breakpoints, then test at real device widths.

Does min-width: 768px include the iPad mini?

Not in portrait. The iPad mini is 744 px wide (6th generation and A17 Pro) or 756 px (A20 Pro), so it stays below a 768 px breakpoint. In landscape it is 1133 or 1158 px.

Is 1024px a tablet or a desktop width?

Both. The iPad Air 13-inch is exactly 1024 px wide in portrait, and small laptop windows are a similar width. Treat it as a width where the layout must work with touch and with a pointer.