Responsive Design Testing: Essential Viewport Sizes to Test

Essential Viewport Testing Matrix

Testing every possible device viewport is impractical. Instead, a well-chosen set of representative sizes ensures broad coverage with minimal effort. This guide provides the minimum viable set of viewports for thorough responsive testing.

The Essential 8 Viewports

Width	Represents	Priority
320px	iPhone SE, legacy small phones	High
375px	iPhone 12 mini, standard iPhone	High
412px	Pixel/Samsung Android phones	High
768px	iPad portrait, tablet standard	High
1024px	iPad landscape, small laptops	Medium
1280px	Standard laptops, Tailwind xl	Medium
1440px	MacBook Air, common desktop	Medium
1920px	Full HD desktop monitors	Low

Testing Tools

Browser DevTools: Chrome, Firefox, and Safari all have built-in responsive design modes. Enter specific viewport dimensions or select from preloaded device profiles.

Automated Testing: Export viewport sizes from this tool as JSON and use them with testing frameworks:

const viewports = [
  { width: 320, height: 568 },
  { width: 375, height: 812 },
  { width: 412, height: 915 },
  { width: 768, height: 1024 },
  { width: 1024, height: 768 },
  { width: 1440, height: 900 },
];

for (const vp of viewports) {
  await page.setViewportSize(vp);
  await expect(page).toHaveScreenshot();
}

What to Check at Each Size

• 320px: Nothing overflows horizontally. Text is readable. Buttons are tappable (min 44px).
• 375-412px: Navigation collapses to hamburger. Images scale down. Forms stack vertically.
• 768px: Two-column layouts begin. Side navigation may appear. Images display at medium sizes.
• 1024-1280px: Full desktop layout. All columns visible. Hover states work as expected.
• 1440-1920px: Content does not stretch too wide. Max-width containers center correctly.

Orientation Testing

Test at least 375x812 (portrait) and 812x375 (landscape) on mobile to catch orientation-specific issues like fixed position elements that overlap or horizontal scroll bars that appear only in landscape.