JimKueneman 28 Posted December 24, 2020 Report Share Posted December 24, 2020 I am on the hairy edge of my knowledge base here but i have a SMS project that when I run on a mobile device it has all the double click zooming. It is really annoying because you may want to click buttons fast and the zoom feature get in the way. I have read you can add touch-action: manipulation; to the controls to disable it for each control. Is it possible to add this to all the controls in SMS somehow? Is it possible to do it globally (I have read that use to be possible but later browsers started to ignore that). Is there another way? Thanks, Jim Quote Link to post Share on other sites
Moderators lynkfs 614 Posted December 24, 2020 Moderators Report Share Posted December 24, 2020 The standard generated index.html should prevent what you're experiencing : <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"/> At least on Android and iPad it does. However there have been problems reported in mobile Safari ( https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices If your problem is indeed linked to mobile/Safari on iPhones, then you can also disable zoom in the settings, or use a 3 finger tap At the moment I don't have an Apple mobile to test the solutions in the links above, but will do soon as I get access Quote Link to post Share on other sites
JimKueneman 28 Posted December 25, 2020 Author Report Share Posted December 25, 2020 Yes this is mobile Safari I am using. Quote Link to post Share on other sites
Moderators lynkfs 614 Posted December 25, 2020 Moderators Report Share Posted December 25, 2020 Got hold of an iPhone, and yes, I see the problem. Testing some possible solutions, probably tomorrow though Quote Link to post Share on other sites
Moderators lynkfs 614 Posted December 25, 2020 Moderators Report Share Posted December 25, 2020 This looks like a non-solvable problem. Apparently Apple changes his/her mind often how to implement this in the various mobile iOS Safari versions and the OS hardware event checking seems to take precedence over html processing. If you change the <body> part of the index.html file to this <body> <script type="text/javascript"> /* This prevents the window being moved by touches, to give the impression of a native app */ document.ontouchmove = function(e) { e.preventDefault(); } document.addEventListener("touchstart", event => {window.alert("touch event starting"); event.preventDefault(); if(event.touches.length > 1) { window.alert("zooming happening"); event.preventDefault(); } }, {passive: false}); </script> <script type="text/javascript" src="main.js"></script> </body> then the problem goes away. However its a sledgehammer solution as it captures all touch events. Depending on what touch events you need, you may be able to re-enable f.i. touch scrolling on selected elements, or channel the above from the document body and all of its children to specific elements only jarto 1 Quote Link to post Share on other sites
JimKueneman 28 Posted December 25, 2020 Author Report Share Posted December 25, 2020 Thanks for looking at this... I installed Dolphin and it works as I would like.. except... new topic for another day. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.