Screen Breakpoint Simulator
Pick a real device or type a custom width, height and device pixel ratio, and see exactly what the browser would report: CSS viewport, physical pixels, aspect ratio, active Tailwind and Bootstrap tiers, plus a scaled device frame and a copyable media query.
Device
“Device pixels per CSS inch” is the nominal figure the platform assumes (96 CSS px per inch × DPR); real panels vary, and browsers do not expose a true PPI.
Scaled frame
1 px on screen = 0.322 CSS px · dashed lines mark Tailwind tiers
Does my content fit?
Does not fit in iPhone 15 Pro Max — overflows by 298 CSS px.
It fits 9 of 13 presets, the narrowest being iPad mini (6th gen) (744 px). Add padding or a scroll container below those widths.
Preset comparison
How every preset behaves against a target breakpoint.
| Device | CSS px | DPR | Physical px | Tailwind | Bootstrap | Tailwind md (768 px) |
|---|---|---|---|---|---|---|
| iPhone SE (3rd gen) | 375×667 | 2x | 750×1 334 | base (xs) | base (xs) | too narrow |
| iPhone 15 Pro Max | 430×932 | 3x | 1 290×2 796 | base (xs) | base (xs) | too narrow |
| Google Pixel 8 | 412×915 | 2.625x | 1 082×2 402 | base (xs) | base (xs) | too narrow |
| Samsung Galaxy S24 | 360×780 | 3x | 1 080×2 340 | base (xs) | base (xs) | too narrow |
| iPad mini (6th gen) | 744×1133 | 2x | 1 488×2 266 | sm | sm | too narrow |
| iPad Air (11") | 820×1180 | 2x | 1 640×2 360 | md | md | applies |
| iPad Pro 12.9" | 1024×1366 | 2x | 2 048×2 732 | lg | lg | applies |
| Laptop 1366 × 768 | 1366×768 | 1x | 1 366×768 | xl | xl | applies |
| MacBook Air 13" | 1280×832 | 2x | 2 560×1 664 | xl | xl | applies |
| MacBook Pro 16" | 1728×1117 | 2x | 3 456×2 234 | 2xl | xxl | applies |
| Desktop 1920 × 1080 | 1920×1080 | 1x | 1 920×1 080 | 2xl | xxl | applies |
| Desktop 2560 × 1440 | 2560×1440 | 1x | 2 560×1 440 | 2xl | xxl | applies |
| 4K UHD 3840 × 2160 | 3840×2160 | 1x | 3 840×2 160 | 2xl | xxl | applies |
Media query for this size
/* iPhone 15 Pro Max — 430×932 CSS px @ DPR 3 */
/* mobile-first: this device and wider */
@media (min-width: 430px) {
.selector { /* … */ }
}
/* only this device width, up to the next pixel */
@media (min-width: 430px) and (max-width: 430px) {
.selector { /* … */ }
}
/* target the pixel density of this screen */
@media (min-resolution: 288dpi), (-webkit-min-device-pixel-ratio: 3) {
.selector { /* … */ }
}About this tool
Screen Breakpoint Simulator models how a page lays out on real devices: it converts CSS pixels to physical pixels through the device pixel ratio, resolves the active Tailwind and Bootstrap tiers, and shows a scaled device frame with the breakpoint guides drawn in. It is a calculator, not an iframe preview — nothing is loaded from another site, every figure is computed in your browser, and the whole tool works offline.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is Screen Breakpoint Simulator really free?
Yes. Screen Breakpoint Simulator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does Screen Breakpoint Simulator upload my data?
No. Screen Breakpoint Simulator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and Screen Breakpoint Simulator is ready to use on desktop or mobile.
Does Screen Breakpoint Simulator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More utility tools
Password Strength Checker
Score your password strength and generate stronger ones.
Password Generator
Generate strong random passwords with configurable length and character sets.
Decision Maker
Let the tool randomly pick from your list of options.
Yes or No Wheel
Spin a wheel for a random yes or no answer.
Discord Timestamp Generator
Pick a date and time to generate Discord timestamp tags with live preview and one-click copy.
Discord Embed Builder
Design Discord embeds with live preview — copy JSON for bots, webhooks, and Discord.js.