2

Is it possible to programatically adjust the zoomed in viewport on a mobile device with Javascript?

The motivation for this question is as follows: In our web app, users review documents. There are a few locations of interest throughout the document and we guide users through these locations by placing a popup beside a location that contains a description and a "Next" button to navigate them to the next location.

On desktop, this works fine because the whole document is visible and the popup draws their attention to the location of interest. However, on mobile, users will zoom in to get a better look at a particular location and upon clicking "Next" we would like to shift the zoomed-in mobile viewport to the next location.

I've tried playing around with window.scrollTo, but this doesn't work since it operates on the full zoomed-out viewport. Is it possible to do what I'm describing via Javascript?

jrrafols
  • 61
  • 3

1 Answers1

2

I managed to cobble something together that seems to work based on the answer I found here: https://stackoverflow.com/a/46137189/6052252

This code could probably use some refinement, but as a starting point it seems to work (Note: uses jQuery):

function ScaleMetaViewport(initialScale) {
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content=""/>');

    var viewport = $("meta[name='viewport']");
    var original = viewport.attr("content");
    var forceScale='';

    if (initialScale) forceScale += "initial-scale=" + initialScale;

    viewport.attr("content", forceScale);
    setTimeout(function()
    {
        viewport.attr("content", original);
    }, 100);
}

//Setting the scaleFactor as follows causes the viewport to zoom out
//as far as possible
var scaleFactor = 1 / window.devicePixelRatio;
ScaleMetaViewport(scaleFactor);

//compute where you want to scroll to
var left = ...
var top = ...
window.scrollTo(left, top);

From my testing, on an iPhone, this will actually shift the visual viewport (the zoomed in area). On Android, it zooms all the way out and adjusts the positioning in the layout viewport according to window.scrollTo.

jrrafols
  • 61
  • 3