I am working on a procedurally generated map displayed through WebGL. The users can move using keyboard keys or with panning (useful on mobile but this works with a mouse too). They can zoom with their mouse wheel, unfortunately this doesn't work on mobile. On mobile I would like to allow them to zoom by "pinching". Currently, on safari ios, it performs a "native" zoom which is a bit buggy, and if you unzoom, it shows all your safari opened windows.
How could I disable these "native pinch zoom effects", and detect pinch events to zoom my map manually?
I tried using ontouchmove events but it is not easy to debug because I can't trigger that event on my computer, and I can't open the debug console to show my console.logs on my mobile.
I am currently working on a similar issue. Will post a full answer when I have it.
However, I can already answer part of your question related to disabling "native pinch zoom effects".
According to this thread: Pointer-events: none doesn't work on mobile
you should be using touch-action: none; on the dom element where pinching happens.
Related
I am looking now for days for a working code to disable the iOS zoom for websites.
I also found this:
disable viewport zooming iOS 10+ safari?
The fixes may work for iOS 10 but seems not to work for iOS 12. I already found a website where the zoom is disabled successfully but I am not able to find out how they have done it.
I know that Apple removed the possibility to disable the zoom via viewport-meta tag but there must be a workaround to disable it for a website.
For our website its essential that the zoom is disabled or that the zoom does not trigger a resize event. Any ideas how to solve this?
What I have tried already is e.g. to prevent touchmove / ontouchstart / gesturestart ... nothing of them worked.
Double tap zoom can be disabled by adding an empty click event listener on your elements.
Disabling pinch to zoom is a pain, you have to prevent touchstart event if event.touches > 1, but this only works when page is not momentum scrolling
See my answer.
On macOS, it's possible to use the gesture "pinch to zoom" with the trackpad to zoom onto a page.
This feature works correctly on Chrome when the page is not in fullscreen. It also works correctly when triggering the fullscreen using the upper-right green button of the Chrome window.
However, when triggering the fullscreen programatically using the HTML5 Fullscreen API (webkitRequestFullscreen -- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), the "pinch to zoom" gesture is disabled.
It's possible to test this out here: when triggering fullscreen using the upper-right green button, "pinch to zoom" works; when using the "Request document", it won't work.
It seems like there are two different fullscreen mode on macOS, but it's hard to find any information on it.
This seems to be intentional behaviour, at least on Mobile. See the discussion at https://bugs.chromium.org/p/chromium/issues/detail?id=736520.
Generally, pinch to zoom is meant for legacy websites. If you want some zooming capability in a fullscreen gallery, you will have to code it yourself.
how do you implement pinch to zoom for a cordova android project
I have a iframe in which I am loading my src
and I want to implement pinch to zoom on the iframe because it is occupying the whole screen
To be precise you can achieve pinch to zoom in two ways
If you open the image in a native container which allows zoom and pinch - the performance is far better, here you might need a Cordova plugin which can do that for you, i found https://github.com/keensoft/FullScreenImage-Cordova-Plugin but i think it only opens up the image in full screen natively but doesnt allow pinch and zoom , you can try
If you dont use a plugin which means the image is shown inside the webview, for which you either write code for touch events or simply use hammer.js which allows this.
Has anyone gotten pinch to zoom to work for a Google Map in the Android Browser? It works fine in Android applications and I hear it works in iPhone's Safari Browser but I'm interested in getting it to work in a web app that's viewed via the Android Browser. Currently you can pinch zoom in but the map does not redraw (i.e. it just gets larger and pixelated). You cannot pinch zoom out.
Edit: It seems to be different on each phone:
Evo - Problem discussed above
Epic - Pinch to zoom out works, zoom in has problem discussed above
Galaxy S - Pinch to zoom in and out both work fine
At the current time, Google Maps API v3 (and any other JavaScript code, for that matter) cannot rely on receiving events related to pinch-to-zoom in JavaScript on Android browsers. See http://code.google.com/p/android/issues/detail?id=11909
If this issue is important to you, I recommend logging in, starring the issue, and leaving a good comment.
For what it's worth, I have not run across this problem in Honeycomb, which makes me at least slightly hopeful that Ice Cream Sandwich will fix this for the phones.
It seems that Android doesnt support multitoches events for javascript. It support only touchstart/mode/end events, but not gesture events so it dont support zoom in out, (for me doesnt work even on galaxy s). Maybe in the android 3.0 they will add this event to browser.
On my website, which is loaded in the webview, there is a map. There are also java scripts that detects double tap for zoom, dragging etc. But is it possible to have a javascript that detects the use of pinch zoom ? there are several examples of it working on an iphone, and on my website there is a script for the pinch zoom but it is only working on iphone.....
Is it possible to get it to work on Android ?
Thanks
When you would like to scale web content in you WebView and enable pinch and zoom, I prefer the simple android way.
webView.getSettings().setBuiltInZoomControls(true);
and you can even hide the controls if you are using API 11 or higher
webView.getSettings().setDisplayZoomControls(false)
There's an open-source library called android-pinch that you can include in your project to enable pinch zoom if you switch your WebView to a WebImageView. Here's an example of usage...
// create the WebImageView object from xml
WebImageView img = (WebImageView) findViewById(R.id.main_pic);
// fetches the image in a background thread
img.setImageFromURL("http://www.mysite.com/mypicture.jpg");
// enable pinch-zoom abilities on the image
new PinchImageView(img);
It's not exactly in a webview, but in any layout, that I wrote a piece of code for detecting pinch in an Android view.
It took me days to find out a solution for this, so I made my own custom pinch gesture detector.
You can see it in Github: http://github.com/luisfer/Neckar
Hope it helps.
This excellent tutorial shows how to implement the Pinch gesture.