How it works
The Viewport Checker shows the current browser viewport dimensions (width × height in CSS pixels) and updates them in real time as you resize the browser window — making it the fastest way to test responsive breakpoints without opening browser DevTools.
Responsive design is tested at specific viewport widths. The standard Bootstrap/Tailwind breakpoints are: 320px (small mobile), 375px (iPhone standard), 390px (iPhone 14), 414px (large mobile), 768px (tablet), 1024px (tablet landscape / small desktop), 1280px and 1440px (desktop). This tool shows exactly where your current window sits relative to these breakpoints.
How to use it: open the tool in a browser window and resize the window or device orientation. The viewport width and height update live in large, easy-to-read numbers. Breakpoint markers show which standard CSS breakpoints are currently active.
Common responsive debugging scenario: a user reports layout issues on their phone. Use this tool on your desktop browser at 375px width to match their viewport exactly. The tool also shows the viewport at common device presets so you can type a target width and know exactly how to resize your browser window to match it.
CSS logical pixels vs. physical: a 375px viewport on a Retina iPhone actually has 750 physical pixels (2× DPR). CSS viewport width (375px) is the relevant value for media queries and layout, not the physical pixel count.
Frequently Asked Questions
- Screen resolution is the total display area. Viewport is the visible area inside the browser window — smaller than screen by the browser's chrome (toolbar, address bar, tabs, bookmarks bar). The viewport is what your CSS and JavaScript media queries respond to.
- Mobile browsers include the URL bar in their viewport height when no content has been scrolled. When the user scrolls down, the URL bar hides and 100vh suddenly increases — causing a layout jump. Use dynamic viewport units (100dvh) or fix mobile viewport issues with CSS workarounds.
- 375×667px (iPhone SE/8), 375×812px (iPhone X/XS), 390×844px (iPhone 14), 393×851px (Pixel 7), 412×915px (Pixel 7 Pro) cover the most common mobile viewports. 768×1024px is the standard iPad portrait viewport.
- Yes. When the software keyboard appears on mobile, it reduces the viewport height (in some browsers). This affects 100vh and window.innerHeight. The exact behavior varies by browser — Chrome on Android resizes the viewport; Safari on iOS does not.