使用Javascript在移动设备上的视窗中进行滚动缩放
使用Javascript在移动设备上的视窗中进行滚动缩放
提问于 2018-10-23 02:29:22
是否可以使用Javascript在移动设备上以编程方式调整放大的视口？
这个问题的动机如下:在我们的web应用程序中，用户查看文档。在整个文档中有几个感兴趣的位置，我们通过在位置旁边放置一个包含描述的弹出窗口和一个“下一步”按钮来导航到下一个位置，从而引导用户完成这些位置。
在桌面上，这可以很好地工作，因为整个文档都是可见的，弹出窗口会将他们的注意力吸引到感兴趣的位置。然而，在移动设备上，用户将放大以更好地查看特定位置，并且在单击“下一步”时，我们希望将放大的移动视口移动到下一个位置。
我尝试过使用window.scrollTo，但这不起作用，因为它在完全缩小的视口上运行。有没有可能通过Javascript来实现我所描述的？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-27 06:10:48
根据我在这里找到的答案，我设法拼凑了一些似乎可以工作的东西：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调整布局视口中的位置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52935619
复制相关文章
相似问题
腾讯云开发者
