Navigation & Header
Test: 320, 375, 768, 1024px
- Menu collapse
- logo spacing
- sticky header height
Responsive Design Tool
Viewport Checker & Breakpoint Inspector
Detect your browser viewport, DPR, Tailwind or Bootstrap breakpoint, and responsive image sizes while testing real layout scenarios.
Live viewport
... × ...
Current CSS viewport, device pixel ratio, and responsive breakpoint in one view.
Viewport
0 × 0
CSS pixels
Visual viewport
0 × 0
Accounts for mobile browser UI
DPR
1x
0 physical px wide
Breakpoint
Base
tailwind · < 640px
Breakpoint Rail
640px until sm
Base
0px+
sm
640px+
md
768px+
lg
1024px+
xl
1280px+
2xl
1536px+
DPR image optimizer
Generate practical srcset sizes
Use current DPR to choose image asset widths without guessing.
1x asset
1px
Recommended for this DPR
2x asset
2px
Recommended for this DPR
3x asset
3px
Recommended for this DPR
srcset="image-1.jpg 1x, image-2.jpg 2x, image-3.jpg 3x"
sizes="(max-width: 1px) 100vw, 1px"Embed widget
Add this checker to docs
The embed reads its own iframe viewport, which is stable and privacy-safe.
<iframe src="https://screensizecalculators.com/embed/viewport-checker?framework=tailwind&theme=auto&compact=1" width="360" height="260" loading="lazy" title="Viewport Checker"></iframe>Responsive scenarios
Test real layouts, not just breakpoints
Card Grid
Test: 375, 640, 768, 1280px
- column count
- card min-width
- gap consistency
Dashboard / Table
Test: 390, 768, 1024, 1440px
- overflow handling
- filter wrapping
- numeric alignment
Form Layout
Test: 320, 414, 768, 1024px
- input tap targets
- label wrapping
- error messages
Media Gallery
Test: 375, 640, 1024, 1536px
- image crop
- srcset choice
- aspect ratio lock
Current breakpoint
See exactly when Tailwind or Bootstrap switches layout ranges, including pixels until the next breakpoint.
DPR-aware images
Translate CSS image slots into physical pixel assets for 1x, 2x, and 3x displays.
Embeddable widget
Add a compact viewport checker to documentation, QA guides, or design-system pages.
Related Calculators
Need adjacent display calculations? Try these tools next:
Viewport Checker FAQ
What is a viewport checker?
A viewport checker shows the live browser viewport in CSS pixels, screen resolution, device pixel ratio, orientation, and the active responsive breakpoint.
Why can viewport size differ from screen resolution?
Screen resolution describes the device screen, while viewport size is the space available to the web page after browser UI, zoom, sidebars, and responsive layout constraints.
Does this tool support Tailwind and Bootstrap breakpoints?
Yes. The tool includes Tailwind's default breakpoints and Bootstrap's default breakpoints, with a live rail showing the active range and distance to the next breakpoint.
How should I use DPR for responsive images?
Multiply the CSS display width by the device pixel ratio. For example, a 360px-wide image slot on a 3x device needs roughly a 1080px source image for crisp rendering.