Javascript 使触摸设备上的缩放行为更像桌面上的缩放行为

我目前遇到了一个问题，我正在工作的网站不能很好地发挥移动设备的放大功能

基本上，网站上有一条水平的全宽线，它是固定的，垂直居中，背景是一条长文本。页面会自动滚动，水平线会告诉用户哪一行文本现在很重要。（页面会自动滚动，以便重要的文本行位于屏幕中央。）

但当我使用Firefox放大Android手机时，屏幕上的线条不再居中。甚至可以放大到线条不再出现在屏幕上的点。即使在这种情况下，页面仍然会自动滚动，我确信重要的文本仍然在水平线下，但是当它不再在屏幕上可见时，它就没有用了

在普通的台式计算机上，这个问题不存在。如果放大，水平线将保持在屏幕中心的固定位置

现在我想知道，是否有可能修改缩放行为，使其不会破坏我在触摸设备上的站点

我知道我可以禁用所有的缩放功能，但我并不只是想取消这些功能。 另外，更改字体大小而不是缩放也不起作用，因为这样网站就不会再滚动到正确的位置

编辑：禁用缩放不是一个选项，即使它只是在触摸设备上禁用。所以这没用

Edit2：这是我的代码的一个非常简化的版本：

$（函数（）{
var textEl=$（“#text”）；
var$w=$（窗口）；
var percentPos=0.000；
setInterval（函数（）{
var currentPosX=window.scrollX | | window.pageXOffset；
var newPosY=textEl.offset（）.top-$w.height（）/2+percentPos*textEl.height（）；
scrollTo（currentPosX，newPosY）；
percentPos+=0.001；
如果（百分比位置>=1）
percentPos=0.000；
}, 100);
})

#行{
位置：固定；
背景色：#ffef011f；
高度：5px；
最高：50%；
宽度：100%；
}
#容器{
文本对齐：居中；
边缘顶部：500px；
边缘底部：500px；
}
#正文{
颜色：#000；
字体：普通12px/1.5 Courier New、monospace、Courier；
空白：预处理；
单词break：打破一切；
文本对齐：左对齐；
显示：内联块；
}

Lorem ipsum dolor sit amet，
献祭精英，
临时工程量清单
我们的劳动和财富都是巨大的。
我们在维尼亚姆岛上吃了一顿饭
诺斯特鲁德实习乌拉姆科
实验室未经检验合格
康多康塞卡特。酒后驾车
多洛在雷德亨德里特
多洛尔的卷发
欧盟福吉亚无法定权利。
圣奥卡塔例外情况
不轻率，不必承担过失
这是一个很好的例子
实验室。
Lorem ipsum dolor sit amet，
献祭精英，
临时工程量清单
我们的劳动和财富都是巨大的。
我们在维尼亚姆岛上吃了一顿饭
诺斯特鲁德实习乌拉姆科
实验室未经检验合格
康多康塞卡特。酒后驾车
多洛在雷德亨德里特
多洛尔的卷发
欧盟福吉亚无法定权利。
圣奥卡塔例外情况
不轻率，不必承担过失
这是一个很好的例子
实验室。
Lorem ipsum dolor sit amet，
献祭精英，
临时工程量清单
我们的劳动和财富都是巨大的。
我们在维尼亚姆岛上吃了一顿饭
诺斯特鲁德实习乌拉姆科
实验室未经检验合格
康多康塞卡特。酒后驾车
多洛在雷德亨德里特
多洛尔的卷发
欧盟福吉亚无法定权利。
圣奥卡塔例外情况
不轻率，不必承担过失
这是一个很好的例子
实验室。
Lorem ipsum dolor sit amet，
献祭精英，
临时工程量清单
我们的劳动和财富都是巨大的。
我们在维尼亚姆岛上吃了一顿饭
诺斯特鲁德实习乌拉姆科
实验室未经检验合格
康多康塞卡特。酒后驾车
多洛在雷德亨德里特
多洛尔的卷发
欧盟福吉亚无法定权利。
圣奥卡塔例外情况
不轻率，不必承担过失
这是一个很好的例子
实验室。

发生这种情况的原因是缩放在不同设备中的工作方式：

• 在台式机中，缩放可以有效地改变设备像素比率。从网站的角度来看，渲染窗口变小了
• 在移动设备中，它变得复杂起来：用两个手指进行僵尸移动会改变页面的可见部分，而不会影响内容的布局。这样想： 将布局视口想象为一个不改变大小或形状的大图像。通过框架可以看到的大图像部分是可视视口。您可以在按住帧（缩小）的同时远离大图像以立即查看整个图像，也可以靠近（放大）以仅查看一部分。 从

在这种情况下，更改可视视口的问题在于它不会更改滚动位置。它仍然跟随布局视口，但它会滚动

这不是一个容易解决的问题

---

更新

有一种方法可以通过获取有关可视视口位置和比例的信息。您可以通过更改线相对于

window.visualViewport.offsetTop

的坐标来居中

---

---

出于可访问性的考虑，不建议禁用缩放功能，因此您可以使用自定义代码替换可视视口缩放功能，只需更改

字体大小，尽管我认为这需要监听触摸事件、查找两个触摸点之间的距离等。
首先，确保用户无法使用此元标记在手机上正常缩放：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

<
(function(){
  // Poll the pixel width of the window; invoke zoom listeners
  // if the width has been changed.
  var lastWidth = 0;
  function pollZoomFireEvent() {
    var widthNow = jQuery(window).width();
    if (lastWidth == widthNow) return;
    // Length changed, user must have zoomed, invoke listeners.
    if(widthNow < lastWidth) doDesktopZoomIn();
    else doDesktopZoomOut();
    lastWidth = widthNow;
  }
  setInterval(pollZoomFireEvent, 100);
})();

var scale = 1;

function doDesktopZoomIn() {
    scale += 0.25;
    var scaleCSS = 'scale(' + scale  + ')';
    document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
    document.body.style.msTransform =   scale;       // IE 9
    document.body.style.transform = scale;     // General
}

function doDesktopZoomOut() {
    scale -= 0.25;
    var scaleCSS = 'scale(' + scale  + ')';
    document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
    document.body.style.msTransform =   scale;       // IE 9
    document.body.style.transform = scale;     // General
}