Widthstablet

Devices with a 820px wide viewport

820px2 devices

2 devices give web pages a 820 CSS pixel wide viewport, with heights from 1180 to 1180px. If your layout fits 820px, it fits all of them. Sizes this wide are about 5.07% of worldwide traffic in StatCounter’s top lists (Aug 2026).

DeviceCSS viewportDPRPhysical pixelsYear
iPad Air 11″ (M2–M4)820×118021640×23602026
iPad 11″ (A16) / 10th gen820×118021640×23602025

Check your site at 820px

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 820px

Breakpoints

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

Room for content

788px with 16px side padding, 772px with 24px. Anything fixed wider than 820px makes the page scroll sideways (fix it).

Sharp images

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

Every height at this width

820 × 1180

Nearby widths

Questions people ask

Which tablets have a 820px wide viewport?

iPad Air 11″, iPad 11″ / 10th gen.

Is 820px the screen resolution?

No. 820px 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 820px?

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

How common is a 820px wide screen?

Screen sizes 820px wide make up about 5.07% of the traffic in StatCounter’s top lists for Aug 2026 (820×1180: 5.07%).

Guides that help