English
HrvatskiWhat is the viewport?
Your viewport size is shown in the result: the width and height of the area inside your browser window where websites are drawn. Resize the window or zoom in and out, and the value updates instantly.
What the viewport is
The viewport is the visible part of a web page. It excludes the browser’s own interface, such as tabs, the address bar and bookmarks, and anything outside the browser, such as the taskbar or dock. It’s always the same size as your screen or smaller.
Why websites care about the viewport
Responsive websites change their layout depending on the viewport width, using CSS breakpoints. Many sites switch layouts around these widths:
- below 640 pixels: phone layout, single column, menu behind a button
- 768 pixels: tablet layout
- 1024 pixels: small laptop layout
- 1280 pixels and up: full desktop layout
That’s why the same site can look different in a narrow window on a large screen.
The viewport on phones
Phones report a viewport in CSS pixels, not physical pixels. A phone with a 1170-pixel-wide display and a device pixel ratio of 3 has a 390-pixel viewport. Mobile sites use the width=device-width viewport setting to match that width; without it, phones render pages as if they were about 980 pixels wide and shrink them.
Testing other viewport sizes
Browser developer tools can simulate any viewport. In Chrome, Edge and Firefox, press F12 (Cmd + Option + I on a Mac) and turn on the device toolbar or responsive design mode to test layouts for phones and tablets without changing your window.