Viewport
AdvancedThe viewport is the actually visible area of a web page in the browser window — the space a page's layout renders into, not the whole device display.
The viewport is the correct concept on which a responsive decision should be made, and this is what separates it from screen resolution. Resolution is the hardware size, but a web page does not render into the whole display; the address bar, window chrome, and on mobile the device pixel ratio make the real layout space smaller and different. A phone with a very high nominal resolution can have a narrow logical viewport, and if a designer counts on the raw resolution rather than the viewport, the layout breaks on that device. Another subtlety is that the viewport is not fixed: rotating the phone, opening the on-screen keyboard, or resizing the window all change it, so a design must react to its change rather than assume a single size. This is why the audience's common viewport sizes, not resolutions, are the right input for setting breakpoints.