Viewport Size Tester
Check your current browser viewport dimensions in real time, identify which CSS breakpoint is active, and compare against common device presets — all without leaving this page. Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator — Width (px) × — Height (px) — Breakpoint — — DPR — Breakpoint Indicator 0640768102412801536+ xs<640px sm640–767 md768–1023 lg1024–1279 xl1280–1535 2xl1536px+ window.innerWidth — Viewport width incl. scrollbar window.innerHeight — Viewport height incl. scrollbar document.documentElement — × — clientWidth × clientHeight screen.width × screen.height — Physical screen resolution devicePixelRatio — CSS px to physical px ratio Orientation — Portrait / Landscape Copy All Info Copied to clipboard! Common Device Viewport Reference Device Viewport (CSS px) Tailwind BP Notes iPhone 15 Pro 393 × 852 xs Portrait, @3x iPhone 15 / 14 390 × 844 xs Portrait, @3x iPhone SE (3rd gen) 375 × 667 xs Portrait, @2x iPad (10th gen) 820 × 1180 md Portrait, @2x iPad Pro 12.9" 1024 × 1366 lg Portrait, @2x Pixel 7 412 × 915 xs Portrait, @2.625x Galaxy S24 360 × 780 xs Portrait, @3x MacBook Air 13" 1280 × 800 xl @2x Retina MacBook Pro 14" 1512 × 982 xl @2x Retina MacBook Pro 16" 1728 × 1117 2xl @2x Retina Desktop 1080p 1920 × 1080 2xl @1x standard How to Use Read the live numbers at the top — they update instantly as you resize the browser window. Check the breakpoint bar to see where you fall in the Tailwind CSS grid (xs / sm / md / lg / xl / 2xl). Compare to device presets in the table to understand how your page will look on real devices. Click “Copy All Info” to grab a text snapshot for bug reports or design handoffs. What Each Measurement Means Property What it measures window.innerWidth/Height The visible viewport, including the scrollbar area clientWidth/Height The viewport minus the scrollbar — matches your CSS media queries screen.width/Height The physical display resolution (not affected by zoom) devicePixelRatio How many physical pixels make up one CSS pixel (2 = Retina) Tailwind CSS Breakpoints Reference Prefix Min-width CSS rule (none — xs) 0 px default styles sm 640 px @media (min-width: 640px) md 768 px @media (min-width: 768px) lg 1024 px @media (min-width: 1024px) xl 1280 px @media (min-width: 1280px) 2xl 1536 px @media (min-width: 1536px) Related tools: Screen Resolution → Screen Resolution Checker | Media Queries → CSS Media Query Generator ...