Free tools
What is my viewport size?
See your window dimensions, screen size and pixel ratio. Resize the window to check where your layout switches breakpoints.
Your viewport size
Updates as you resize…
CSS pixels
- Screen size (CSS px)
- …
- Device pixel ratio (DPR)
- …
- Viewport orientation
- …
- Color depth
- …
Your current CSS breakpoint
Default minimum widths. The highlighted range is the largest breakpoint your window matches. Your project may use custom values.
Tailwind CSS …
- base≥ 0px
- sm≥ 40rem
- md≥ 48rem
- lg≥ 64rem
- xl≥ 80rem
- 2xl≥ 96rem
Bootstrap 5 …
- xs≥ 0px
- sm≥ 576px
- md≥ 768px
- lg≥ 992px
- xl≥ 1200px
- xxl≥ 1400px
Ybug doesn’t save any of this...
More free tools
- HAR file analyzer & sanitizer Strip cookies and tokens from a HAR file before you pass it on, and find the request that failed. The file never leaves your browser.
- Image diff Compare two screenshots pixel by pixel. Highlight what changed, or swipe between versions.
- Browser & environment info Your browser, OS, screen and viewport in one place. Paste it into a ticket or send your developer a link.
- User agent checker & parser Check your user agent and client hints, or paste a string to identify its browser, engine, OS and device.
- Test credit card numbers Copy sandbox card numbers for checkout QA. Cover successful payments, declines and 3D Secure.
Frequently asked questions
What is the difference between viewport size and screen resolution?
The viewport is the area where a page is laid out, measured here with window.innerWidth and innerHeight, including scrollbars. The screen size comes from screen.width and screen.height in CSS pixels. It can differ from your monitor’s native resolution because of display scaling or browser privacy settings.
What is my device pixel ratio? Is it the same as DPI?
Device pixel ratio (DPR) is the ratio of physical pixels to CSS pixels. A DPR of 2 means one CSS pixel spans two device pixels in each direction. Browser zoom can change it. DPI is pixels per physical inch; a web page can’t reliably measure your display’s physical DPI from DPR alone.
Which breakpoints does this checker use?
Tailwind CSS defaults: sm 40rem, md 48rem, lg 64rem, xl 80rem and 2xl 96rem. Bootstrap 5 defaults: sm 576px, md 768px, lg 992px, xl 1200px and xxl 1400px. Tailwind’s rem units follow the browser’s initial font size, usually 16px. These are reference sets; the checker doesn’t inspect your own site’s CSS.
Why doesn’t the number change when I pinch to zoom?
This tool shows the layout viewport, which CSS breakpoints use. On mobile, pinching changes the visible portion of the page (the visual viewport) while the layout viewport usually stays the same. Desktop page zoom can change the layout viewport and DPR.
“What size was your window?”
Ybug’s feedback widget attaches the viewport and screen size to every bug report, so nobody has to ask.
Try Ybug free for 10 daysInstalls in seconds. No credit card required.