Screen Size & Viewport Checker
Shows the window.innerWidth and other viewport size, window size, screen resolution, device pixel ratio, and current Tailwind CSS breakpoint of the browser you're using, in real time. The table below updates automatically as you resize the window or switch devices in your browser's device toolbar. Everything happens in your browser, and no value is ever sent to a server. If you also want to check keyboard event values, try the Keycode (e.code / e.key) Checker as well.
🔒 Runs in your browser · Your data is never sent to a server
| Viewport size | |
| Browser window size | |
| Screen resolution | |
| Available screen size | |
| Device pixel ratio (DPR) | |
| Orientation | |
| Current breakpoint | |
| OS color scheme setting | |
| Touch support |
Breakpoint reference (Tailwind CSS)
| Name | Minimum width |
|---|---|
| None | up to 639px |
| sm | 640px and up |
| md | 768px and up |
| lg | 1024px and up |
| xl | 1280px and up |
| 2xl | 1536px and up |
When this is handy
- Checking which Tailwind CSS breakpoint your real device or browser window currently falls into while implementing a responsive design.
- Checking the device pixel ratio (DPR) on a high-density display such as a Retina screen.
- Quickly getting a rough picture of a user's screen size, orientation, and touch support when investigating a support request or bug report.
Notes
- "Screen resolution" and "Available screen size" are affected by the OS/display scaling setting, so they may not match the display's physical resolution.
- "Touch support" is only a rough indicator of whether the device supports touch input; actual touch usability also depends on the OS and input device state.
- "OS color scheme setting" reflects the OS/browser's prefers-color-scheme value, independent of this site's own theme (the light/dark mode you can pick manually from the sidebar). The two can disagree.
- Breakpoints are based on Tailwind CSS default values (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) and may differ from a project's actual configuration if it has been customized.
Glossary
Viewport
The area of the browser where a web page is actually displayed (window.innerWidth / innerHeight), excluding the address bar and scrollbars. Responsive @media queries are evaluated against this value.
Device pixel ratio (DPR)
How many physical pixels one CSS pixel maps to (window.devicePixelRatio). High-density displays such as Retina screens report 2 or 3, which is useful when deciding whether to serve higher-resolution images.
Breakpoint
The screen-width threshold at which a responsive layout switches. This tool checks the current width against Tailwind CSS default breakpoints (sm/md/lg/xl/2xl).
prefers-color-scheme
A CSS media feature that detects the OS/browser dark mode or light mode setting, read via window.matchMedia("(prefers-color-scheme: dark)"). Often used to decide a site's initial theme.
FAQ
Why does the resolution differ from my display's physical resolution?
Screen size values are affected by OS or display scaling. On high-DPI displays a smaller value than the physical resolution is reported; check the device pixel ratio as well.
Which breakpoints are used?
Tailwind CSS defaults: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. If your project customizes them, the result will not match.
Is it related to this site's dark mode setting?
The "OS color scheme" is the prefers-color-scheme value from your OS or browser and is independent of this site's theme switcher.
Share this page