'user-scalable=no but still able to scale entire page on web map application?

I have a web application that is essentially a map (mapbox) with some d3.js points overlayed, filters, etc.

My issue is that when zooming in on the map using pinch (mobile), when I accidentally pinch over one of the points, or one of the map pop-ups, the entire page zooms (i.e. scaling). This is a fairly common occurrence. I only want user to be able to zoom the map, not the page itself.

I've implemented:

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

I also tried user-scalable=0

And still the behavior persists. I've also tried this:

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

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

But this is cumbersome and doesn't exactly work the greatest because it involved limiting event-listeners one element at a time. Shouldn't the user-scalable argument in the HTML be enough? I don't understand why this is happening.

javascripthtmld3.jsmapbox


Solution 1:[1]

Mobile browsers have no effect on user scalable because they over ride it to get people responsive experience on the mobiles. Sites like google maps also zoom when we pinch in the site(expanding the ui elements as well as the map)

One way to override this response is to detect the pinch gesture and then re zoom the page to the normal level by a function such as:

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

Solution 2:[2]

Shouldn't the user-scalable argument in the HTML be enough?

Depends on the browser/device. There are not many legitimately cases where zooming should be disallowed, so browsers will ignore it. Some browsers like Safari uses heuristics based on text size to decide if it should zoom or not... (where the solution is to set font-size to 17px or higher on input elements to prevent zoom)

  1. First strategy would be to call preventDefault() on all mouse events, like mouseup, mousedown, et.al (not just the touch events) until you are able to block the zoom.

  2. Second strategy is to take into account the zoom and scale the images and point locations by the amount of zoom...

(Probably also want to take into account window.devicePixelRatio when scaling.)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 user5886944

Related Questions