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

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

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

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

---

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

根据我在这里找到的答案，我设法拼凑出一些似乎有效的东西：

这段代码可能需要一些改进，但作为一个起点，它似乎可以工作（注意：使用jQuery）：

函数ScaleMetaViewport（initialScale）{
$（'meta[name=viewport]'）。删除（）；
$（'head'）。追加（''）；
var viewport=$（“meta[name='viewport']）；
var original=viewport.attr（“内容”）；
var-forceScale=''；
如果（初始刻度）forceScale+=“初始刻度=”+初始刻度；
attr（“内容”，forceScale）；
setTimeout（函数（）
{
attr（“内容”，原文）；
}, 100);
}
//按如下方式设置缩放因子会导致视口缩小
//尽可能
var scaleFactor=1/window.devicePixelRatio；
ScaleMetaViewport（scaleFactor）；
//计算要滚动到的位置
变量左=。。。
var top=。。。
窗口。滚动到（左，顶部）；

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

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);