Viewports visualisation app ALPHA

Requires DESKTOP browser - for now

This layer has position: absolute

This app emulates the behaviour of the two viewports when you pan, zoom, and generally interact with them.

The blue region is the visual viewport. As you can see, it can move across the layout viewport, pushing it down and up across the document as required.

The yellow region is the layout viewport. It constrains the test site’s CSS layout, and also serves as a window to look at the document. It can move anywhere, but in practice, in normal sites, it only moves vertically. By definition the document and the layout viewport have the same width; the document takes its value from the layout viewport, after all. Therefore panning the layout viewport left and right is impossible. It’s only when the document contains elements that are way wider than the layout viewport that it’s possible to pan the layout viewport, but that doesn’t happen in this simple test.

By default the layout viewport is 900px wide; I set this as the default layout viewport for the fictitious device this app emulates. You can set it to the ideal layout viewport, 300px (but it’s still BUGGY), and you’ll see that interactions generally get simpler and zooming becomes less necessary. I chose the values 900 and 300 exactly because they never occur in the wild, so you’re not tempted to equate this test app with an actual device.

Then there are zoom-based layouts. This text is only readable after you’ve zoomed in quite a bit. Would it be a good idea to use this for small print or other less important page elements?

There are links that trigger several actions, and also keyboard shortcuts for most of these actions. Try panning and zooming around to see what happens.

I have no clue yet how to get this thing working on actual mobile phones; it depends on you seeing both views at the same time, and that’s impossible on small screens.

Still, at least I can make clear what the differences are between three position values:

Issues

This layer has position: fixed
This layer has position: device-fixed
This layer has position: device-fixed
This layer has position: fixed

Use the arrow keys to pan. Use z to zoom in, and x to zoom out. See the right column of the test site for the other functions.

One thing you should know about: if the blue visual viewport element is off-screen, the double-tap (t) feature doesn’t work.

docEl is shorthand for document.documentElement