User browser zoom

Help & Support
1

Hi

We’re experiencing users trying to use their trackpad on their dell laptops with chrome, and if they use pinch-to-zoom instead of two-finger-scroll they manage to activate the browser zoom (CTRL+,CTRL-) function which will completely ruin the HTML interface and also lower the resolution in the playcanvas container.

Is there any way to disable this behavior via code/css?

Regards

Björn

2

Hi @bjorn.syse,

So there is a metatag for that, to disable browser zoom but I think that works only on mobile:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />

In your case the only workaround is to actually prevent the mouse wheel event on the page element. Here is a helpful post from another engine:

3

You might not be able to disable this as it’s a client side usability/accessibility feature.

4

That first meta tag is already present but doesn’t help with my problem. However, this simple addition to mouse-input.js seems to have done the trick on my macbook at least. I have to double check this with the dell trackpad aswell.

´´´
MouseInput.prototype.onMouseWheel = function (event) {

// Prevent default zoom when using laptop + trackpad + pinch/spread
if(event !== null && event.event !== null) {
    event.event.preventDefault();
}
```

This is a tricky one, because it’s not really touch-related. This is not on touch, but instead about how dell and mac os translated the pinch-spread gesture on their trackpads to a mouseWheel-event. Sometimes as a CTRL+MouseWheel as the case is on the Dell laptop. This in turns trigger the Brower zoom and messes up the page.

I’ll be back when I’ve confirmed it works on windows/dell/trackpad aswell.

2 Likes
5

I can indeed confirm this cancels the Dell laptop’s urge to engage Browser zoom in chrome and let’s me contiue to create my own reaction to the MouseWheel-even. Success!

2 Likes