Difference between visual viewport and layout viewport?

Layout viewport

Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.

Visual viewport

It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.

Video example of both layouts

Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.

Layout viewport vs visual viewport (video)

On Mobile/Tablet devices

On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.

For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.

When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).

<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />

Examples of viewport meta tag

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag With the viewport meta tag