Viewport Tester
Preview layouts at any screen size with device presets and media query snippets.
Preview (375x667px, scaled to fit at 93%)
375x667
devvkitnav
Hero heading
Subline text that wraps naturally at this viewport width.
CTA button
footer
Media Query Snippet
Breakpoint Reference
| Device | Width | Height |
|---|---|---|
| Phone (iPhone SE) | 375px | 667px |
| Phone (iPhone 14 Pro Max) | 430px | 932px |
| Fold (Galaxy Fold) | 717px | 512px |
| Tablet (iPad mini) | 768px | 1024px |
| Tablet (iPad Pro) | 1024px | 1366px |
| Laptop (MacBook Air) | 1280px | 832px |
| Desktop (1080p) | 1920px | 1080px |
| Desktop (1440p) | 2560px | 1440px |
The preview approximates a page layout at the selected viewport. For pixel-perfect testing, use your browser's responsive mode or real devices.
//Share this tool
//Related tools
JSON Formatter
Format, validate, minify, and prettify JSON data instantly.
JWT Decoder
Decode and inspect JWT tokens: header, payload, signature, expiration.
Base64 Encoder/Decoder
Encode text or files to Base64 and decode back. UTF-8 safe.
Regex Tester
Test regular expressions in real-time with match highlighting and groups.
Preview how a page layout fits any screen size. Pick from phone, tablet, and desktop presets or enter custom dimensions, then grab a media query snippet.
[x]Features
- -Presets for common phones, tablets, and desktops
- -Custom width and height inputs (240 to 5120px)
- -Scaled live preview with a sample page chrome
- -Media query snippet with copy button
- -Breakpoint reference table
- -All local — no page loading or uploads
>Use Cases
- >Checking responsive layouts at common breakpoints
- >Choosing the right media query widths for a design
- >Communicating viewport constraints to the team
- >Verifying layout behavior on ultra-wide and small screens