Xiaomi Pad 6 screen size & viewport

The Xiaomi Pad 6 renders web pages at a CSS viewport of 1024 × 1366 in portrait (1366 × 1024 in landscape).

What these numbers mean

1024 × 1366 is the CSS viewport size — the coordinate space your layout, media queries and vw/vh units work in. It is not the hardware pixel count: the Xiaomi Pad 6 packs more physical pixels behind each CSS pixel (its device pixel ratio), which is why images meant for it should be exported at 2× or 3×.

For a tablet this size, a layout should already be at its multi-column / tablet breakpoint.

Targeting it in CSS

/* Styles for viewports up to the Xiaomi Pad 6 */
@media (max-width: 1024px) {
  .container { padding-inline: 16px; }
}

/* Exactly the Xiaomi Pad 6 in portrait */
@media (width: 1024px) and (height: 1366px) { /* … */ }

Common things that break at 1024px wide

• Fixed-width elements wider than 992px (content minus typical padding) cause horizontal scroll.
• Tap targets under 44×44 CSS px are hard to hit.
• Sticky headers taller than ~15% of 1366px eat too much of the screen.
• Text set below 16px triggers zoom-on-focus in form fields on iOS.

Other Xiaomi sizes