Develop Reference

Disable pinch / zoom in IOS Safari while being in fullscreen

I have a webgl game working fine on iPad Safari
I can disable system pinch / zoom actions with usual solutions (like this one: disable viewport zooming iOS 10+ safari?)
But I can't get any to work after the game is switched to fullscreen with document.body.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)
I have touch-action: none;, user-scalable=no in meta, passive: false and e.preventDefault(); for all touch events (touchstart, touchend, touchmove, touchcancel)
Edit: here's a codepen with most things I've tried: https://codepen.io/SerialF/pen/BaaRKJN

Have you made any progress on this? I am running into a similar issue with a three.js built on angular application. Can't figure out how to disable the exit full screen on an ipad in safari when pinch-zoom-out. I found that Chrome doesn't support full screen on ipad, I tried disabling touch events, e.preventDefault() on a touchstart listener. I can not find where the exitFullScreen is being called, seems like it's just built into the OS and is completely independent from the DOM.
UPDATE: Not a 100% solution but thanks to Florent for bringing this workaround to my attention.
"They do suggest to add a shortcut to home screen, as with all the required PWA meta-tags (see here), this is the only way to have fullscreen working properly"

Detecting pinching in desktop browsers

So with scrolling events I can detect panning gestures in desktop browsers and modify content accordingly. But is there a way to detect also pinching (zooming) gestures? So that instead of browser zooming the whole site (or not doing anything) I could modify a DOM element accordingly.
There are laptops with such trackpads (like Magic Trackpad and Force Touch Trackpad). So gestures can be captured, but how can I use them in desktop web apps?
Imagine that you could pinch and zoom in our out in Google Map in desktop browser. And pan left and right with a hand gesture.

I would suggest using some specialized library like hammer.js. Have a look at this example of the hammer.js documentation, where they utilize pinch gesture recognition.
According to that example detecting the pinch gesture could be as simple as:
var myElement = document.getElementById('myElement'),
mc = new Hammer.Manager(myElement),
pinch = new Hammer.Pinch();
mc.add(pinch);
mc.on("pinch", function(ev) {
console.log('You sir did just pinch!');
});
However, if you only wanted to react to the changing viewport within your layout, you might be better off with using responsive design features like media queries.
Edit: It does not work that way. Thats because the desktop browsers do not yet support gesture events. However the second part of my answer remains true: you can use media queries based on the viewport dimensions and you could hook in on the resize events of the window as usual.

I am looking for the same thing - pinching on only a specific DOM element and not entire webpage (let's an embedded drawing app instead of the google maps example).
In the developer console from Chrome and Opera select Toggle Device Toolbar and chose a touch device. Pinching can be simulated by keeping the shift key + left mouse click pressed. Then check out the monitorEvents : https://developers.google.com/web/tools/chrome-devtools/debug/command-line/events?hl=en
Additionally, Hammer.js has a touch emulator library:
<script> TouchEmulator(); </script>
function log(ev) {
console.log(ev.touches);
}
document.body.addEventListener('touchmove', log, false);
Later edit. For the Google Maps specific example the viewport is set like this so that it uses its own zooming libraries and not the browser embedded .
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

Disabling swipe right to previous page on Windows Phone

I'm trying to use http://wipetouch.codeplex.com/ to implement swiping on a Meteor app to shift between templates in Iron Router.
It works beautifully on iOS and Android but on Windows Phone, the OS' native swipe gesture (swiping right in the browser moves one page back in history) interferes with the user's swiping action.
Is there any way I can disable this?
Also which other platforms have similar functionality which would prevent the user from swiping in the web app effectively?
As an example, this app also uses the same library to implement swipe gestures.
Note: Using touch-action: none on the body tag does not work.

I encountered the same problem on a little web application : it which was a scratch game, where the player had to swipe the finger all over the "scratchable" zone to discover what he had won.
The game was supposed to run on Windows 8.1 tablets, with IE10 on it.
We put in the css this snippet :
*{
touch-action: none;
}
The result is to completely deactivate any touch events on the app (including the swipe backward / forward).
But we had to reactivate the touch event only on the scratch zone, to allow the player to play :)
For this we had to add this :
#playzone{
touch-action: chained;
}
The app still works perfectly, both on IE10 on tablets but also on Windows Phone 8.1.
(please forgive my English, it's not my mother tongue)
EDIT : After having tested more on IE, it seems that adding the touch-action:none; on the html element is enough to achieve what the OP wanted.

Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down

I am testing some scroll events and noticed that there is a scroll event fired in iOS 7 Mobile Safari on keyboard up, but not on keyboard dismiss/down. I was wondering if anyone has any knowledge to why this is?
I personally think that this is a bug (and am trying to report it but can't login to bug tracker at the moment), and that they should pick to throw scroll events on both keyboard up and down, or choose to not throw them at all since it seems that the view returns to its previous state.
To demonstrate the issue I created this little site where you can click on the the input box and see that a scroll event fires on keyboard up, but does not fire when done is pressed on the keyboard menu and the screen scrolls to it's initial position. I added a scannable qr code that sends you to the test url also below. Thanks in advance!
TEST URL: http://lp.mydas.mobi/test/cs/scroll_issue/error.html
TEST qr:

Ran into this issue the other day in a Phonegap app, but the behavior seems consistent with the new Safari as well.
As best I can tell, the new Safari resizes the viewport reported to the web page when the keyboard is up. I had a page with height of 100% and a nav absolutely positioned at the bottom of the page. When the keyboard came up, the nav came with it. Annoyingly, this caused 2 of my input fields to lose focus, hiding them and making it impossible to complete the login!
Previously, I avoided using height=device-height in the viewport meta tag because OLD Safari didn't seem to understand anything about the status bar, and the reported device-height was always 20px too tall, resulting in 20px scroll to see the very bottom of the page.
The fix I ended up using was setting height=device-height and iOS7 didn't have any of the issues with the viewport resizing/nav overlap. To my surprise, the page remained 100% of the device height in ALL cases.
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no">
To get this fixed-height situation to work consistently with iOS5 and 6, I did a little device detection and manually calculated the device height - 20 px, resetting the viewport tag.
function iOSversion() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
// supports iOS 2.0 and later: <http://bit.ly/TJjs1V>
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
}
ver = iOSversion();
if (ver[0] >= 5 && ver[0] <= 6) {
$('head meta[name="viewport"]').attr("content", "width=device-width, height="+(window.innerHeight-20)+", user-scalable=no")
}
I feel kind of wrong about this solution, but stuck between a rock (new Safari) and a hard place (old Safari), this was my answer.
If you find a better way, please please please let me know! Good luck :)

Are you using phonegap or what?
if you are using phonegap with iscoll.js then you just need to refresh your scroller when keyboard event fires in your device.
here is the link for keyboard event:
keyboard event
and on close keyboard you just need to call this code :
window.scrollTo(0, 0);

Enable zoom in Trigger.io mobile app

We're developing an app using Trigger.io in conjunction with Jquery Mobile 1.1.1. We're aware of the modifications to the viewport meta tag in JM to enable or disable zoom, but in another Stack question about Trigger.io, one of their devs mentioned they disable zoom at the webview level: Preventing zoom with trigger.io forge
We would like to enable zoom when displaying a large image on the page - is this possible using the Trigger framework?

yes we do disable zooming in the WebView: if you include a large, unscaled image in your HTML, the user will be able to scroll around to see the full image, but pinches won't work.
Of course, you could have the image down-scaled to start with, then blow it up to full size when the user clicks on an icon? Libraries such as iScroll4 might help here too.
Also, we would be able to make the WebView's zooming behaviour somewhat configurable (although we would always default to making it non-zoomable). Get in touch with support#trigger.io if you absolutely need different behaviour.