使用 Javascript 在移动设备上滚动放大视口

Question

是否可以使用 Javascript 在移动设备上以编程方式调整放大的视口？

这个问题的动机如下：在我们的网络应用程序中，用户查看文档。整个文档中有几个感兴趣的位置，我们通过在包含描述和“下一步”按钮的位置旁边放置一个弹出窗口来引导用户浏览这些位置。

在桌面上，这很好用，因为整个文档都是可见的，并且弹出窗口将他们的注意力吸引到感兴趣的位置。但是，在移动设备上，用户将放大以更好地查看特定位置，单击“下一步”后，我们希望将放大的移动视口移动到下一个位置。

我尝试过使用 window.scrollTo，但这不起作用，因为它在完全缩小的视口上运行。是否可以通过 Javascript 执行我所描述的操作？

Answer 1

根据我在这里找到的答案，我设法拼凑出一些似乎可行的东西：https://stackoverflow.com/a/46137189/6052252

此代码可能需要一些改进，但作为起点，它似乎可以工作（注意：使用 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);

根据我的测试，在 iPhone 上，这实际上会改变视觉视口（放大的区域）。在Android上，它会一直放大并根据window.scrollTo调整布局视口中的位置。