Viewports visualisation app ALPHA

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:

• absolute: relative to the HTML document. Works everywhere.
• fixed: relative to the layout viewport. Works in most browsers, but Safari/iOS has its own weird implementation where the fixed layer scrolls with the visual viewport, but slower. Whatever.
• device-fixed; relative to the visual viewport. Invented by yours truly; kind-of supported in Edge, and Chrome might be willing to implement it as well.