Display web page on mobile as overview with zoom-in on detail

I am looking to achieve the following effect in a mobile browser using HTML and JavaScript.

Firstly, the browser will show a facsimile of a complicated page consisting of sections, columns etc, a bit like, say, the page of a broadsheet newspaper. This facsimile will fit in its entirety on the screen.

From here, I want a single tap on a particular section of the page to zoom in on that section, causing it to fill the entire screen width.

It should then be possible to navigate from one portion of the screen to the other by dragging up/down/left/right.

Does anyone know of any technique/tool/library to achieve this?

I should mention that the paragraphs/columns/etc are identifiable divs.

That sounds like the default behaviour on mobile when you don’t have a viewport meta tag, you see the full page width zoomed out and can double tap to zoom in on specific sections.

If you want to recreate something like that with JavaScript it’s not going to be straight forward.

  • Find all the dimensions of the sections in the page you want in your outline
  • Build a low fidelity representation of the page in canvas over the top of the html page.
  • Zoom into the canvas, fading it out using the scale transforms on the canvas and html doc behind it.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.