Visual viewport vs Layout viewport on mobile devices

Question

I\'ve just read a nice article on viewport which left me with a couple questions regarding Visual viewport vs Layout viewport on mobile devices.

the width

Answer 1

Both the layout viewport and visual viewport are measured in CSS pixels. This is an important distinction to make. As opposed to the physical pixels on the device, CSS pixels are used to keep dimensions of the content relatively constant and controlled, and the device then translates CSS pixels into device pixels.

Understanding the difference between CSS pixels and device pixels may assist in the understanding and answering of your questions.

1. The layout viewport's dimensions are effectively the initial dimensions of the content (in CSS pixels).

   The layout viewport is used to best determine how to position and render the content initially. It is independent of the device's zoom level. By saying "...whatever can be shown on the screen in the maximally zoomed-out mode", I think he's alluding to the point that the layout viewport's dimensions are unchanging; it will always be the same size, irrespective of the current visual viewport.

2. The visual viewport is just the viewable area of the page -- again, in CSS pixels. If you zoom in on a page, you're increasing the size of the CSS pixels, which naturally reduces the number of CSS pixels that can fit on the device. That's why the visual viewport's dimensions shrink when you zoom.

   The visual viewport cannot be any larger than the content on the page.

   The content's dimensions are largely dictated by the layout viewport.

   The layout viewport's dimensions are set by the meta-viewport rule.

   Therefore, the visual viewport's dimensions should change in reaction to changes in the meta-viewport rule.

---

You have since asked (in comments):

Why is it that when there's content that's explicitly wider than the layout viewport, the visual viewport is stretching to fit all of that in? Shouldn't there be a scrollbar?

No, because you're only indicating to the browser what the initial dimensions of the layout viewport should be, not the visual viewport.

If you want the visual viewport's dimensions to not adjust to the full width of the content on page load, set the initial-scale=1 property inside the meta-viewport declaration.

---

There's a fantastic read over on the Mozilla Dev Centre about the viewport meta tag: https://developer.mozilla.org/en/mobile/viewport_meta_tag