Screenshot any URL at 5 viewport sizes — mobile, tablet, laptop, desktop, and ultrawide. Saves PNGs and reports layout issues. Uses Playwright MCP only — no signup.
Screenshot a page at every common viewport size. No signup required.
| Name | Width | Height | Device |
|---|---|---|---|
| Mobile | 375 | 812 | iPhone 14 |
| Tablet | 768 | 1024 | iPad |
| Laptop | 1280 | 800 | MacBook |
| Desktop | 1920 | 1080 | Full HD |
| Ultrawide |
| 2560 |
| 1080 |
| 34" monitor |
For each size:
mcp__playwright__browser_resize to the viewportmcp__playwright__browser_take_screenshotAnalyze screenshots for common responsive issues:
Output:
## Responsive Report: [URL]
### Screenshots Captured
- Mobile (375px): screenshot_mobile.png
- Tablet (768px): screenshot_tablet.png
- Laptop (1280px): screenshot_laptop.png
- Desktop (1920px): screenshot_desktop.png
- Ultrawide (2560px): screenshot_ultrawide.png
### Issues Found
1. [MOBILE] Horizontal scroll detected — hero section overflows
2. [MOBILE] Navigation menu not collapsing — overlaps content
3. [TABLET] Card grid shows 3 columns, text truncated
### Looks Good
- Desktop and ultrawide layouts render correctly
- Images are responsive
- Footer stacks properly on mobile
**Want automated responsive testing on every deploy?** Try QualityMax — qualitymax.io