topic Re: IOS 10 user-scalable=no in ArcGIS JavaScript Maps SDK Questions

IOS 10 user-scalable=no

NickCameron2 — Wed, 19 Oct 2016 03:49:35 GMT

Hi,

Since IOS 10 user-scalable=no no longer works in the viewport meta tag.

This obviously breaks maps as pinch zooming zooms the whole page, not just the map.

I couldn't find any workarounds - does anyone have any?

Thanks,

Nick

Re: IOS 10 user-scalable=no

TonyGeorges1 — Sat, 11 Dec 2021 17:37:23 GMT

Hi Nick,

I have the same behavior with Api v4 and iOS 10... After looking at others smart mapping API :-), they use a listener on the documentElement to catch the zoomPinch and double tap events and stop them.

A guy post a similar solution on StackOverflow and you could easily implement it in a dojo module like that :

SO link : http://stackoverflow.com/a/38573198/3366795

Sample dojo module :

/**
 * Created by tony on 28/11/2016.
 */
define([
  "dojo/sniff",

  "dojo/domReady!"
], function (
  sniff
) {
  if (sniff('ios'))
  {

    //Disable pinch zoom on document
    document.documentElement.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    }, false);

    //Disable double tap on document
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
      var now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false);
  }

});
//# sourceURL=vmv/mobileBehaviors.js

Good luck !

Re: IOS 10 user-scalable=no

NickCameron2 — Tue, 29 Nov 2016 01:32:08 GMT

Hi Tony,

Thanks heaps for this! I'll give it a try when I get a chance and report back how it goes.

Nick

Re: IOS 10 user-scalable=no

NickCameron2 — Sat, 11 Dec 2021 17:37:26 GMT

Hi Tony,

Just had a chance to try this out and it is working well, thanks again!

I also have an absolutely positioned menu system on top of the map. I added the below to stop the menus from bouncing around when panning the map.

//disable scroll on the map containers so the menu doesn't bounce around when panning the map
 let mapContainers = document.querySelector(".view");
 mapContainers.addEventListener('touchmove', function (event) {
 event.preventDefault();
 }, false);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍