Screen size checker

What size is my screen?

Designers, developers and support teams often need to know the exact size of a screen. Which resolution do visitors have? What width is this window? Why does this layout break on my phone? This page reads what your browser reports and shows it in a single place, and it updates as you resize the window, so you can watch the numbers change.

What each value means

• Browser window (viewport): the width and height of the area where the page is drawn, in CSS pixels. This is the number that responsive layouts react to.
• Screen size: the resolution of your monitor or phone as reported to web pages, also in CSS pixels.
• Pixel ratio: how many physical pixels there are for each CSS pixel. On many phones and laptops it is 2 or 3, which is why images need higher resolution to look sharp.
• Physical pixels: the screen size multiplied by the ratio, an estimate of the native resolution.
• Usable area: the screen minus bars such as the taskbar or the dock.

Breakpoints

Responsive layouts switch design at certain widths, known as breakpoints. The tool shows which breakpoint your window is in for two popular frameworks, Tailwind (sm 640, md 768, lg 1024, xl 1280, 2xl 1536) and Bootstrap (sm 576, md 768, lg 992, xl 1200, xxl 1400). It is a handy way to check why a layout looks the way it does at a given size.

Other useful details

You also see the orientation, the color depth, whether the device has a touch screen and can hover, whether a dark color scheme or reduced motion is selected in the system, and the browser language. These settings affect how sites should behave, and they are useful when someone reports that a page looks wrong on their device.

Private and simple

The tool only reads the values that any web page can see, and nothing is sent to a server or stored. The screen size shown is what the browser reports, which can differ from the physical size of the device or from the resolution set in the system if the page is zoomed or the display is scaled.