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.
Related
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.
I'm working on an a webapp, where I need to adapt the contents of the screen when the virtual keyboard is expanded. Luckily, someone has already created an example of this here:
https://pmusaraj.github.io/ios15-bottom-bar2.html
When tapping on the text area, it correctly resizes. However, there is a small delay between the tap and when the resize happens in iOS 15.5. This is because the resize event doesn't seem to fire fully until after the keyboard is expanded. In iOS Chrome, interestingly, this does not happen and it works correctly.
Are there any workarounds to get Safari to fire the event sooner? Or alternative approaches to achieving a similar effect?
As of today there are no real solutions for this.
The only "workaround" that I found is to detect when the keyboard opens and closes with regular events like focus and blur. But you can't guess the final visualViewport sizes because there are different keyboards so this wasn't an option for me.
My "solution" to this issue was extend the modal and its background fade beyond the viewport with after elements (see here). That way there is still a jump between opening and closing the keyboard, but at least the look is a bit more consistent.
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.
I have an element with a line graph in it that I want to be able to handle pinch zooms, so the user can zoom in or out on a certain part of the graph. This works great in every browser except IE11, where instead of zooming the element, it zooms the entire page.
Is there an obvious way to prevent this kind of functionality, so IE allows for pinch-zooming on specific elements? Or maybe there's some way to capture the pinch event, e.preventDefault(), and maybe zoom the graph manually?
I have asked a few other people to try to reproduce the issue, and it seems like it's not a problem on Windows 10... I'm on Windows 7. Could this really be platform dependent? But even if it is, maybe intercepting the events is a good approach? Any suggestions would be greatly appreciated.
Here's an example of a chart where I am having this problem:
http://demos.wijmo.com/5/Angular/FlexChartZoom/FlexChartZoom/
According to the official documentation, programmatic control of touch and gesture recognition requires Windows 8 or later.
Go to any online multitouch javascript demo page; here are some:
mdn (same as jsfiddle.net/Darbicus/z3Xdx/10/) or this. I can only post max 2 links but every online multitouch demo i could find has same behaviour as described here.
Put one finger on canvas and don't move or release it. Now put another finger on canvas and try to draw some shape by moving it (be careful not to make movement with first finger). It doesn't draw shape, touchmove event is not happening for 2nd touch! Don't release any finger yet. Try to move only first finger. Now you get touchmove event for both fingers at once and all events work fine (immediately) for both touches from now on.
I tested it on 2 different tablets with Android 4.2.2. On both tablets i tested it first with Chrome 31 and 32 and then with Firefox 26. Always same result.
Why is touchmove event not firing for second touch if first touch hasn't moved yet? How to solve this?
Google fixed this behaviour in latest Chrome beta version 33 (https://src.chromium.org/viewvc/chrome?revision=244063&view=revision)
Firefox and Opera still have this problem.