使触屏设备上的缩放行为更像桌面端

Question

我目前遇到的问题是，我正在处理的一个网站在移动设备上缩放时无法正常工作。基本上，该网站有一条水平全宽线，固定在垂直中心，并且在背景中有一长串文字。页面会自动滚动，水平线告诉用户哪一行文字现在很重要。（页面会自动滚动，以使重要的文本行位于屏幕中央。）但是当我使用Firefox在我的Android手机上缩放时，该线不再居中于屏幕上。甚至可以缩放到该线完全不在屏幕上的程度。即使在这种情况下，页面仍然会自动滚动，我确信重要的文本仍然在该水平线下面，但是如果它不再屏幕上可见，那么它就没有用了。在普通的桌面电脑上，不存在这个问题。如果您缩放，水平线仍保持在屏幕中心的固定位置。现在我想知道，在触摸设备上是否可能修改缩放行为，以使其不破坏我的网站？

我知道我可以完全禁用缩放，但我不想夺走这个功能。同时，如果改变字体大小而不是缩放，则网站将无法滚动到正确的位置。

编辑：禁用缩放不是选项，即使它仅在触摸设备上被禁用也不行。因此 this question 不能提供帮助。

Edit2: Here's a very simplified version of my code:

$(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将百分比位置发送给客户端。)
但是，如果您在桌面设备上放大，您会发现黄色线仍停留在相同的文本行上，并且黄色线保持在中心位置。但是，在我的Android手机上使用Firefox，则不是这样的：

- Forivin

---

@Justinas 不，我不想剥夺用户缩放的能力。 - Forivin

那么，也许您可以尝试向我们展示您的代码？ - Justinas

好的，我添加了一个非常简化版本的代码。 - Forivin

请重新开放或提供适当的关闭原因，https://dev59.com/SG855IYBdhLWcg3wNhd1 并没有回答我的问题。 - Forivin

在桌面上，缩放焦点位于中间。在触摸设备上，您可以通过在其他位置（例如左上角）捏合来缩放。如果在左上角缩放，线条是否仍然可见于触摸设备？ - Richard

Answer 1

这是由于不同设备上缩放的工作方式不同：

- 在桌面设备上，缩放会有效地更改devicePixelRatio。从网站的角度来看，渲染窗口会变小。

- 在移动设备上，情况变得复杂：用两个手指缩放会改变页面的可见部分，而不影响内容的布局。可以这样想：

布局视口就像一个不变大小或形状的大图像。你能通过镜框看到大图像的一部分，那就是视觉视口。你可以带着镜框离开大图像（缩小）一次看到整个图像，或者靠近它（放大）只看到一部分。 引自这个答案。

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

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

更新：

可以通过可视视口 API获取有关可视视口位置和缩放比例的信息。您可以通过相对于window.visualViewport.offsetTop改变其坐标来居中该行。

不建议禁用缩放，因为这会涉及到可访问性问题，所以您可以用自定义代码替换视觉视口缩放，只需更改font-size即可。但我认为这需要监听触摸事件，找到两个触点之间的距离等等...

- D. Pardal

Answer 2

首先，使用此元标记确保用户无法在移动设备上正常缩放此帖子：

<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
}

希望这能帮到你！

- Dah Person

---

嗯，似乎不起作用 https://jsfiddle.net/yLc8xsm9/3/embedded/result - Forivin