使用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调整布局视口中的位置。

Answer 2

可能的解决方案

对于 React 移动应用程序：

这个问题困扰了我很长时间，尝试了各种方法，window.scrollTo(0,0) 连接到 useEffect，fontSize 至少为 18，最终在移动 iOS (chrome) 上为我解决了这个问题我的全局 body css 标签中的“位置：固定”。

这使得当键盘确实出现并且视图向上滚动时，但是当单击完成时，位置重置为正常。

// styles.css

    body {
      // other code
      position: fixed
    }