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