real-time detection

Viewport Size Browser size check

Automatically update all data when the window is zoomed, and quickly confirm the current responsive breakpoints and available CSS Media Query.

Currently Viewport

innerWidth
innerHeight
outerWidth
outerHeight
Screen Width
Screen Height
Device Pixel Ratio
Orientation
Color Depth

Device level

MobileTabletLaptopDesktopWide

CSS Media Query

Responsive testing tips
  • Desktop browsers allow you to drag the window edge to view values.
  • Device emulation of developer tools changes the CSS Viewport.
  • The height of the mobile address bar may continue to change when it is expanded or collapsed.
  • Please set the breakpoint at a point where the content naturally breaks.


Viewport, Screen and Responsive Breakpoints
Viewport is the visual area provided by the browser for web page layout. CSS vw, media queries and many layout calculations are based on it. Screen is the CSS size of the entire display reported by the operating system. Even if the browser only occupies half of the screen, it will not be equal to the current Viewport.
The device name is just an interval label that is easy to understand and should not be the only basis for design. A more reliable approach is to create a flexible layout first, and then add breakpoints when the content starts to become crowded, line breaks, or there is too much white space. DPR affects image clarity but does not directly change CSS layout width.
Common width categories
This tool uses 640, 768, 1024, and 1440px as reference boundaries to display Mobile, Tablet, Laptop, Desktop, and Wide Screen in order. The actual project can be adjusted according to the design system, without having to chase every device.
Frequently Asked Questions
What is Viewport?
It is the CSS pixel area that the web page can currently layout and display, usually observed using innerWidth and innerHeight.
What is the difference between innerWidth and outerWidth?
innerWidth represents the content Viewport; outerWidth also includes the browser window border and sidebar.
Why is Screen Width larger?
Screen represents the entire screen, of which the browser may only occupy a portion.
Will DPR change Media Query?
Generally, width queries use CSS pixels, and DPR mainly affects the ratio of CSS pixels to entity pixels.
Why does the height of the phone change?
Showing and hiding the mobile browser toolbar will change the height of the viewport, and the dynamic viewport unit can handle some situations.