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
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 !
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.
<SPAN class="comment token">//disable scroll on the map containers so the menu doesn't bounce around when panning the map</SPAN> <SPAN class="keyword token">let</SPAN> mapContainers <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">querySelector</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">".view"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> mapContainers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'touchmove'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">preventDefault</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Thanks heaps for this! I'll give it a try when I get a chance and report back how it goes.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.