This is a demo of a fixed position header and footer on a phone screen. On the right you can see the what the browser sees.

One thing to try is focusing this textfield which will show a keyboard.

The viewports

There are two current viewports, and one proposed new viewport which are updated as the keyboard shows and scrolling takes place. On a desktop user agent, these viewports all have the same dimensions.

Layout viewport

The layout viewport is the size to which layout takes place. Fixed position objects are fixed to the edges of this viewport. This viewport scrolls (moves down) when you scroll the page.

Visual viewport

The visual viewport is the content which is currently being viewed by the user. As the user pinch zooms this viewport becomes smaller and pans around within the layout viewport. When the visual viewport reaches the layout viewport edge then the layout viewport can be scrolled to view more content.

Fixed visual viewport

This is a hypothetical new viewport which could be used for positioning fixed position elements. In most cases it is equal to the layout viewport except when an overlay keyboard is shown which shrinks the visual viewport but not the layout viewport.

Scrollable content

It's important to ensure that the content is scrollable so that you can see the difference between the visual viewport and the layout viewport.

For that reason we're putting a bunch of scrollable content. If the content doesn't scroll try making your browser narrower.