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.

Solution

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

Comments

[copenndthagen]

I just read your answer and still find it hard to grasp what u r trying to say...May be i'll have to read a few more times for it to become clearer..anyways, would it be possible for u to explain in more simpler terms OR explain based on an example like the one i have posted..

[Chris]

I've reorganised and cleaned up my explanation. I'm yet to cite your example, but let me know if that's any clearer now.

[copenndthagen]

Hey Chris..thx for updating your answer..much better now, though i have some follow up questions..i understand diff between CSS and Device pixels..My questions are 1. You say layout viewport will always represent the full width and height of the content, So when we set meta viewport tag, is that controlling the layout viewport OR is it still decided by the content width/height. Also does this depend on what is the greater OUT of content OR set viewport width? 2. You say visual viewport's dimensions are linked to content's dimensions. I did not get that..I mean shouldn't that be fixed always?

[Chris]

re: (1) The layout viewport is set once; it's there to let the browser say "OK, I know my upper limits for laying everything out, it has to fit within X". The viewport width ultimately dictates how wide content should be (assuming there's no ridiculously long words that would cause overflow).

[Chris]

re: (2) my saying the visible viewport is linked to the content is probably not the best way of explaining it. Ignore that bit. The only association is that the visible viewport can be adjusted to be as wide as the page's content.

[copenndthagen]

Ok..thx again..a few more questions before i accept this..Lets say, i have a page which has a div with a fixed width of say 1200px..Now i set meta viewport to device-width (768px for iPad) So my question is how will the page be rendered now? Will the fixed width of 1200px be respected and viewport will be ignored OR will the device width override any fixed width on the page?

[copenndthagen]

That is to indirectly say setting meta viewport is only helpful for fluid or % based layouts and has no effect on fixed width layouts ? May be u can try ipad.atwebpages.com/vp2.html to understand what i am trying to say..

[Chris]

If you set the meta-viewport value, that is what the width of the layout viewport will be. No exceptions. If there's content with explicit widths that are larger than the layout viewport, the visible viewport will grow larger to encompass all the content on the page.

[Chris]

I think most of the questions you've asked of me would be far clearer had you read part one of the quirksmode guide to viewports: quirksmode.org/mobile/viewports.html -- it explains both device vs. CSS pixels, and the role the layout viewport plays in rendering.

[copenndthagen]

Ok..Actually i did read both part 1&2 before asking this..when u say, the visible viewport will grow, i assume u r referring to the visual viewport..Where my confusion essentially lies is the behavior of layout viewport.my understanding is when we set meta viewport width, the page is rendered as thinking that 100% width = that set layout viewport width..So in my case, when i have a div of 1200px and meta layout viewport set as 768px, it should have initially rendered by showing 768px width and shown scrollbars for the rest. i am not seeing that happening on ipad.atwebpages.com/vp2.html

[copenndthagen]

Please correct my understanding on this specific point..I'll be able to accept the answer then..

[Chris]

let us continue this discussion in chat

[copenndthagen]

Ok..so from what i have understood, the reason the scrollbar does not appear initially is bcoz the browser would always try and zoom out to the max to dsplay the full page (assuming no scale set)....So my understand of visual viewport is now clear..But it is not 100% clear for layout viewport..i mean does it only control the layout rendering and if yes, i understand how that happens in a % based layout..But am still not clear what happens when there are fixed px values and we set layout viewport..like the different combinations of those..

[Chris]

I have done my best to explain that already. Other people have attempted to explain this to you before as well: stackoverflow.com/questions/7370859/… stackoverflow.com/questions/6333927/…

[copenndthagen]

Ok..last question and i'll close this...Does the layout viewport only have impact on % based layout rendering ? I do not see it playing any role in fixed width layout rendering. is that correct?

[Chris]

It impacts elements with implicit or calculated widths, such as inline blocks of text, or percentage widths. Again, as explained before, it is used only to determine an initial width for the page so content may be adequately laid out.

[ChrisF]

@testndtv - if you have more questions post them as new questions. Stack Overflow is not a forum and doesn't handle threads.

[overexchange]

You say that: visual viewport is measured in css pixels. I donot agree because visual view port is the window thru which you see layout viewport content. That window is your device screen with given screen width and height.