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 and the height of the layout viewport are equal to whatever can be shown on the screen in the maximally zoomed-out mode

I did not quite understand what that means. When they say "maximally zoomed-out mode", does that mean that the layout viewport is different for different HTMLs (and not specific to different devices like iPad, Xoom, etc)?

Secondly, I've created a demo page to measure these two viewports. (Please view this on an iPhone/iPad to get the correct values.)

I understand that the layout viewport can be changed by setting the meta viewport tag, but that also changes the visual viewport--why is that? It says that the visual viewport is the part of the page that’s currently shown on-screen, so my understanding was that the visual viewport should not be affected by the meta viewport setting.

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