Difference between visual viewport and layout viewport?

What is the Difference between visual viewport and layout viewport for a mobile device like iPhone/iP开发者_运维技巧ad?

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

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

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.

Layout viewport

Its measurements are always the same regardless of orientation or zoom level, just depend on the device/browser window.

Visual viewport

It varies (when zoomed for example). This is the part of the page that’s actually shown on the screen at any given point.

Video example of both layouts

Layout viewport: The green area in the minimap.
Visual viewport: The red box in the minimap.

Layout viewport vs visual viewport (video)

On Mobile/Tablet devices

On mobile devices, things can be a little more complicated by default, because in order to allow a “full web” experience, many mobile devices return a fake higher layout viewport dimensions.

For example, the classic iPhone by default reports a layout viewport width of 980px. This means that if you create a 320px element on the iPhone, it will fill up only about a third of the screen real estate.

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries.

When we are creating responsive websites is very useful to use the viewport meta tag, which lets us control the scaling and layout viewport of many devices (using the real dimensions, not the fake reported).

<meta name="*viewport*" content="*width=device-width*, initial-scale=1, maximum-scale=1" />

Examples of viewport meta tag

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the viewport meta tag With the viewport meta tag