user-scalable=不能，但仍然可以在web地图应用程序上缩放整个页面？

Question

我有一个web应用程序，本质上是一个地图(mapbox)与一些d3.js点叠加，过滤器等。

我的问题是，当我使用pinch (移动端)放大地图时，当我不小心抓住其中一个点或地图弹出窗口时，整个页面都会缩放(即缩放)。这是相当常见的情况。我只希望用户能够缩放地图，而不是页面本身。

我已经实现了：

<meta name="viewport" 
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

我也尝试过user-scalable=0

但这种行为仍然存在。我也尝试过这个：

document.addEventListener("touchstart", function(e){
  e.preventDefault();
},{passive: false});

document.getElementById('map')
 .addEventListener('touchstart', function(e){e.stopPropagation()}, false);

但这很麻烦，而且不是最好的，因为它涉及到一次限制一个元素的事件侦听器。超文本标记语言中的user-scalable参数还不够吗？我不明白为什么会发生这种事。

Answer 1

移动浏览器对用户可伸缩性没有影响，因为它们覆盖了它，让人们在手机上获得响应体验。像谷歌地图这样的网站也会在我们缩小网站时进行缩放(扩展ui元素和地图)

覆盖此响应的一种方法是检测pinch gesture，然后通过如下函数将页面重新缩放到正常级别：

function toggleZoomScreen() {document.body.style.zoom = "100%”;}

Answer 2

中的用户可伸缩参数还不够吗？

取决于浏览器/设备。不允许缩放的情况并不多见，所以浏览器会忽略它。一些浏览器，如Safari，使用基于文本大小的启发式方法来决定是否应该缩放...(解决方案是在输入元素上将font-size设置为17px或更高，以防止缩放)

1. First策略是在所有鼠标事件上调用preventDefault()，比如mouseup、mousedown、et.al (而不仅仅是触摸事件)，直到您能够阻止缩放为止。

1. 第二个策略是考虑缩放，并根据缩放量缩放图像和点位置...

(可能还希望在扩展时考虑window.devicePixelRatio。)