What's My Browser Size?

See your live viewport size, screen resolution and pixel density instantly. Resize your window and watch every number update in real time.

  • 100% free
  • No sign-up
Free Design Tool

What's My Browser Size?

See your live viewport size, screen resolution and pixel density instantly. Resize your window and watch every number update in real time.

Your browser window
—×—px
—

Viewport

Viewport width—
Viewport height—
Aspect ratio—
Orientation—

Screen

Screen resolution—
Available screen space—
Device pixel ratio—
Colour depth—

Breakpoint

Current category—
Common matching device—
Touch capable—
Reduced motion preferred—

Common breakpoints

Building a responsive site and want it checked properly? Get a responsive design review

All figures are read directly from your browser and update live as you resize the window. Nothing is sent anywhere or stored.

Planning a new website?

We design fast, mobile-first websites that look sharp on every screen and turn visitors into enquiries.

See our web design services →Book a strategy call
01Overview

What is my browser size?

Your browser size, or viewport, is the visible area of a web page inside the browser window. It is usually smaller than your screen resolution because of toolbars, scrollbars and the operating system's taskbar.

This free browser size checker shows your live viewport width and height, screen resolution, available screen space, device pixel ratio, colour depth, aspect ratio and orientation. It also tells you which responsive breakpoint you are in, the closest matching common device, and whether touch and reduced motion are enabled.

Resize your window and every number updates instantly. Copy all the details to send to a developer when reporting a layout bug.

Quick answer

Your viewport size is shown at the top of this page in pixels and updates as you resize the window. Viewport is the area your website actually renders in. Screen resolution is the full display size.

  • Free, no sign-up
  • Live updates
  • Breakpoint detection
  • Copy all details
02How to use

How to use the Browser Size Checker

Open this page on the device or window size you want to check.

  1. Open the page

    Your viewport and screen details appear instantly.

  2. Resize the window

    Drag the edge of the browser and watch the numbers and breakpoint change.

  3. Check the breakpoint

    See whether you are in the mobile, tablet, laptop or desktop range.

  4. Copy the details

    Paste them into a bug report so developers can reproduce the exact size.

03How it works

Viewport vs screen resolution vs pixel ratio

Three numbers that are often confused.

How they relateViewport = visible page area (CSS pixels) Screen = full display size (CSS pixels) Pixel ratio = physical pixels per CSS pixel Physical width = CSS width x Pixel ratio

Figures are read directly from your browser and update live. Nothing is sent anywhere or stored.

Worked example

An iPhone in portrait mode.

Viewport
390 x 844
Pixel ratio
3
Physical pixels
1170 x 2532
Breakpoint
Mobile
Designers work in CSS pixels (390 wide), while images need 3x the resolution to look sharp.
04Reference

Common responsive breakpoints

Typical width ranges used by frameworks like Bootstrap and Tailwind.

Small mobileOlder and compact phones
320 px to 374 px
MobileMost modern phones
375 px to 767 px
TabletiPad portrait, small tablets
768 px to 1,023 px
LaptopLaptops, iPad landscape
1,024 px to 1,439 px
DesktopDesktop monitors
1,440 px to 1,919 px
Large desktopFull HD and larger
1,920 px to 2,560 px
03757681,0241,4401,9202,560
05Tips

Responsive design tips

Design for content, not for specific devices.

Do this

  • Start mobile firstMost traffic is mobile. Design the small screen first, then enhance for larger ones.
  • Set breakpoints where layout breaksResize slowly and add a breakpoint where the design stops working.
  • Serve sharp imagesUse srcset so high pixel ratio screens get higher resolution images.
  • Test real devicesBrowser resizing is a great start, but touch, keyboards and browser bars behave differently on phones.

Mistakes to avoid

  • Confusing viewport and resolutionA 1920 px screen often has a viewport under 1900 px.
  • Fixed-width layoutsElements with fixed pixel widths cause horizontal scrolling on phones.
  • Ignoring landscapePhones in landscape have very little height. Check sticky headers.
  • Designing for one deviceThere are hundreds of sizes. Test ranges, not models.
06FAQ

Frequently asked questions

What is my browser size?

It is shown live at the top of this page. That is your viewport, the area web pages render in.

What is the difference between viewport and screen resolution?

Screen resolution is the full display size. The viewport is the visible page area inside the browser, after toolbars and scrollbars.

What is device pixel ratio?

How many physical screen pixels make up one CSS pixel. Retina and most modern phones have a ratio of 2 or 3.

Why does my viewport change when I zoom?

Browser zoom changes how many CSS pixels fit on screen, so the viewport width changes too.

What screen size should I design for?

Design fluidly for 360 px phones up to 1920 px desktops, and check the breakpoints in the table above.

Is any data collected?

No. All figures are read in your browser and never sent anywhere.

The Big Growth team

Building a responsive site?

We design and build websites that look and work right on every screen size, then test them on real devices. Explore our responsive web design services.

Get a responsive design review Browse all free tools