I created a mapbox map displaying own tiles and this work ok on desktop. When I tried on it mobile (Iphone using IOS IOS 10.3.1) Safari the map displays ok but touch does not seem to work (pan or zoom in/out). If I use the navigation control (+, -) to zoom in or zoom out, the map displays the data just fine.
I was wondering if anynone else has run into a similar issue ?
I'm using 'Mapbox gl js' version 0.34.0:
<script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css" rel="stylesheet" />
One odd thing I noticed that in the browser there is an 'i' on bottom right of the map, but clicking on it to display any info does not seem do any thing. May be that 'i' means some thing ?
If i display the same map on same iphone using Chrome, I have the same issue but using 'Google search' display the map correctly and respond to touch by display the data just fine.
Thanks Steve. I found the source of the problem. I had this line in the .html code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no">
After changing it to:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I now can zoom and pan my map ok on my mobile device. The meta 'viewport' attrivutes 'maximum-scale' and/or 'user-scalable' were getting in the way.