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

Question

我目前遇到了一个问题，我正在处理的网站与移动设备的放大方式无法很好地配合。

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

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

在普通台式计算机上不存在此问题。如果您放大水平线，则它保持在屏幕中央的固定位置。

现在我想知道，是否可以在不破坏我在触摸设备上的网站的情况下修改缩放行为？

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

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

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

$(function() {
    var textEl = $('#text');
    var $w = $(window);
    var percentPos = 0.000;
    
    setInterval(function() {
        var currentPosX = window.scrollX || window.pageXOffset;
        var newPosY = textEl.offset().top-$w.height()/2+percentPos*textEl.height();
        window.scrollTo(currentPosX, newPosY);
        
        percentPos += 0.001;
        if (percentPos >= 1)
            percentPos = 0.000;
    }, 100);
    
})

#line {
    position: fixed;
    background-color: #ffef011f;
    height: 5px;
    top: 50%;
    width: 100%;
}

#container {
    text-align: center;
    margin-top: 500px;
    margin-bottom: 500px;
}

#text {
    color: #000;
    font: normal 12px/1.5 Courier New,monospace,Courier;
    white-space: pre;
    word-break: break-all;
    text-align: left;
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="line"></div>
<div id="container">
    <span id="text">
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure 
dolor in reprehenderit in 
voluptate velit esse cillum dolore 
eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui 
officia deserunt mollit anim id est 
laborum.

    </span>
<div>

要在移动设备上运行它，您可以单击此处：https : //jsfiddle.net/k754fb1p/embedded/result

（实际上，服务器正在处理滚动位置，只是通过 websockets 将百分比位置发送给客户端。）
但是您可以看到，如果您放大桌面设备，黄线保持在同一文本行上，而黄线保持不变在中心。在我装有 Firefox 的 Android 手机上，它不会：

Answer 1

这是因为缩放在不同设备中的工作方式：

• 在桌面上，缩放有效地改变了devicePixelRatio. 从网站的角度来看，渲染窗口变小了。
• 在移动设备中，它变得复杂：用两根手指缩放会更改页面的可见部分，而不会影响内容的布局。像这样思考：

  将布局视口想象成一个不改变大小或形状的大图像。您可以通过框架看到的大图像部分是视觉视口。您可以在按住相框（缩小）的同时远离大图像以立即查看整个图像，或者您可以靠近（放大）以仅查看一部分。从这个答案。

在这种情况下更改视觉视口的问题在于它不会更改滚动位置。尽管如此，它仍然遵循滚动的布局视口。

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

更新

有一种方法可以通过Visual Viewport API获取有关视觉视口位置和比例的信息。您可以通过更改相对于 的坐标来使线居中window.visualViewport.offsetTop。

由于可访问性问题，不建议禁用缩放，因此您可以使用自定义代码替换视觉视口缩放，该代码仅更改font-size.