Difference between visual viewport and layout viewport?

Question

What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iPad?

I have gone through a lot of online resources, but am still unclear about it.

Answer 1

The visual viewport is the part of the page that’s currently shown on-screen.

The layout viewport can be considerably wider than the visual viewport, and contains elements that appear and do not appear on the screen.

Imagine the layout viewport as being a large image which does not change size or shape. Now imagine you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

For a great treatment of the issue, see: http://www.quirksmode.org/mobile/viewports2.html

Answer 2

A very good explanation of the two is found here.

In summary:

Visual viewport

The visual viewport is the part of the page that’s currently shown on-screen. The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.

Layout viewport

However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.

Thus the element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly wider than the phone screen. This makes sure that your site’s layout behaves as it does on a desktop browser.

How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.

In short, the layout viewport is generally the width of the viewport when the screen is zoomed all the way out.