Pinch Zoom and Zooming in general bugs

[Jammy]

Hi Guys,

The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: https://jamdonut.com/prod/0.8.2/

I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS.

Thanks, Jammy.

[Jammy]

Temporary fix: Do not allow resize of the UI by resizing the browser, i.e. only my fullscreen button will re-size and re-position the UI. this means if you stretch your window the game stretches making text ugly. It allows me to disable resizing on zoom, so if people accidentally zoom pixijs doesn't care and won't resize. Bit lame... At a loss here for better solution.

[alex_h]

you should be able to achieve this by including a viewport meta tag in your html header. Something along these lines:

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

 

[Jammy]

8 hours ago, alex_h said:

you should be able to achieve this by including a viewport meta tag in your html header. Something along these lines:

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

 

This doesn't appear to work, I can still zoom if I try this on this page: https://jamdonut.com/zoomtest.html

[BobF]

5 hours ago, Jammy said:

This doesn't appear to work, I can still zoom if I try this on this page: https://jamdonut.com/zoomtest.html

I think the "user-scalable" setting only works for mobile. Not all browsers are keen on allowing devs to disable an accessibility feature such as zooming, so you're probably going to have trouble finding a complete solution.

[Jammy]

36 minutes ago, BobF said:

I think the "user-scalable" setting only works for mobile. Not all browsers are keen on allowing devs to disable an accessibility feature such as zooming, so you're probably going to have trouble finding a complete solution.

Yes it seems that way so far, the current "fix" I have is kinda alright but it's a bit lame, I really liked stretching the browser - but in the end this plays in an iframe so i'm sure it'll be alright.

[mattstyles]

Pretty sure you can not disable zoom on latest ios version (or maybe one version back) due to accessibility. It's a bit of a brute-force approach from Apple, sceptics could say they don't really want mobile web to succeed, not where it takes the place of native apps anyway, but, dealing with accessibility is an issue that needs to be addressed.

If you wrap your app in cordova/native then there is a way to nuke accessibility features, but make sure you carefully test how this plays our for your use-case if you go this road.