Question

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

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

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

我已经尝试过使用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调整布局视口中的位置。

使用Java

1 个答案: