Jammy

Pinch Zoom and Zooming in general bugs

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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" />

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.