Widthstablet

Devices with a 1024px wide viewport

1024px2 devices + 4 with other display settings

2 devices give web pages a 1024 CSS pixel wide viewport, with heights from 1366 to 1366px. If your layout fits 1024px, it fits all of them.

DeviceCSS viewportDPRPhysical pixelsYear
iPad Air 13″ (M2–M4)1024×136622048×27322026
iPad Pro 12.9″ (2018–2022)1024×136622048×27322022

Also 1024px wide with a different setting

DeviceSettingCSS viewport
MacBook Air 13″ (M2–M5)Larger text1024 × 665
MacBook Air 15″ (M2–M5)Larger text1024 × 663
MacBook Pro 14″ (2021–2026)Larger text1024 × 665
MacBook Air 13″ (M1) / Pro 13″Larger text1024 × 640

Check your site at 1024px

Paste your address (or localhost:3000). doesitfit shows it on real screen sizes at once and tells you, bluntly, where it spills.

Free, no sign-up. Or ask Claude, ChatGPT or Codex to check it.

Designing for 1024px

Breakpoints

Tailwind: lg (sm: md: lg: styles apply). Bootstrap: lg.

Room for content

992px with 16px side padding, 976px with 24px. Anything fixed wider than 1024px makes the page scroll sideways (fix it).

Sharp images

At DPR 2, a full-width image needs 2048px of real pixels.

Every height at this width

1024 × 1366

Nearby widths

Questions people ask

Which tablets have a 1024px wide viewport?

iPad Air 13″, iPad Pro 12.9″, plus 4 more when the display size or scaling setting is changed.

Is 1024px the screen resolution?

No. 1024px is the width in CSS pixels, what web pages get. The screens have 2× as many physical pixels across (the device pixel ratio).

Which breakpoint applies at 1024px?

Tailwind CSS: lg (sm: md: lg: styles apply). Bootstrap: lg. Media queries use this CSS width, not the screen resolution.

Guides that help