Cannot Disable Double Tap Zoom iOS

Help & Support
1

I have built a WKWebview (containing my Playcanvas program) iOS Swift 5 application, and have successfully disabled pinch zooming and zooming when a text field is selected, but cannot disable double tap. I need my game to be full screen and not have players accidentally zooming in when they double tap buttons. Any advice for this? Really a blocker for me releasing my game on mobile.

Thanks,
Mitch

2

Does this happen on our PlayCanvas hosted published projects? I believe we add meta to the header that prevents this in the browser:

Screenshot 2022-03-30 at 08.13.08
Screenshot 2022-03-30 at 08.13.081946Ă—218 54.2 KB

3

Interesting - it works with the playcanvas hosted build which is good news. But i have those same meta tags in my build (im using the playcanvas api to download my build), any reason why that html or js would be different than if we host it with playcanvas? I dont see the difference between my html and the html of the playcanvas hosted html

Self Hosted Html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

Playcanvas hosted html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

I did notice the game is in an iFrame when playcanvas hosts - could that have anytthing to do with it?

4

Shouldn’t do, the iframe parent page has the same tags AFAIK.

Maybe it’s a setting to do with WKWebview? Unfortunately, this is outside my knowledge.

5

I have a deadline so i have just decided to use iframes on my domain and use the playcanv.as build, instead of self hosting, thanks for responding

6

You could try calling preventDefault on the window touch down event? I’ve seen that help prevent default browser before

Search for preventDefault on the page

7

Thanks, ill check that out - as an update, even with the playcanv.as published build in my ios WKWebview, i still can double tap to zoom - so i guess it wasnt about my link vs playcanvas at all, seems like the meta tags in the html dont prevent that

8

Interesting, it seems like it is related to the configuration of WKWebview at the moment then?

https://developer.apple.com/forums/thread/111183

9

well i suppose its a combination of things, i have tried the e.preventdefault you linked above on the canvas and the document as a whole with no luck - Also the apple thread you linked just refers to meta tags which dont seem to work anymore. All the browsers including safari (WkWebview) ignore that for accessibility now. Is there any example PlayCanvas projects that disallow zooming via double-tap or pinch to zoom i could look at? Ive burned two work days tryign to disable double-tap zooming with no luck

Thanks

10

I don’t have an iOS device on hand at the moment to try but if you open something like this in Safari, does that allow you to double tap to zoom/pinch etc? 3D Bitmoji Library

11

That works! I put that url in my WkWebview and double-tap zooming is disabled! So it looks like it is an html/css/js issue not swift issue for me. I looked at the html/css and the viewport meta tags are exactly the same between my project and that project. Do you know who built it and maybe i could see what they did to disable the double-tap zooming?

Thanks

12

I built it but didn’t do anything specific around disabling zoom. I’ve literally just hit publish on the project and it’s hosted on playcanv.as so I’m very confused on this.

Do you have HTML elements in your project?

13

Yeah i do, i built all my “HUD” in html + css because its easier for me to make it look right then the creating a GUI in playcanvas. Ill try to remove any meta tags manually added, or any css or js related to trying to control multi-touch, double touch or viewport stuff.

14

Im as confused as you are
I did a build off my master branch and the double tap still zoomed

So i removed some suspicious lines i added at some point to an scripts initialize function when starting mobile support:

var meta = document.createElement('meta');
meta.name = "viewport";
meta.content = "width=device-width, initial-scale=1, user-scalable='no'";
document.getElementsByTagName('head')[0].appendChild(meta);

document.documentElement.addEventListener('touchmove', function (event) {
        event.preventDefault();      
    }, false);
    document.documentElement.addEventListener('touchstart', function(event){
        event.preventDefault();
    });
    document.querySelector("#application-canvas").addEventListener('touchstart', function(event){
        event.preventDefault();
    });

And it worked! No more double tap zoom! Seems like my 2 days of debugging were due to an effort when i started mobile support.

Confusing thing is i re-enabled those lines for a sanity check, and the double-tap-zoom is still disabled. I deleted the entirre mobile app to rule out if it was caching the working one.

So pretty much the bug seems to be fixed, no more double-tap-zoom, but i honestly dont know why.

1 Like