Hello fellow game developers,
I'm making a game that will ideally be played on a tablet or phone... but I want to ensure that the default browser behavior of "overscrolling" when the user swipes the "page" doesn't occur.
e.g. I'm catering specifically to a known device (and resolution) thus I want to "fix" the screen size to exactly 640x480 for example.
Webkit does provide meta tags for this, that lock the scaling of the viewport... e.g.
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>
or for some devices with extra high pixel density, the preferred is:
<meta name="viewport" id="viewport" content="initial-scale=1.0,target-densitydpi=device-dpi,user-scalable=no"/>
However if I add this (either) and use the device dimensions above (or hard code them... I still get the screen shifting issue when I touch and drag.
I also tried wrapping all the content on the page in a div that was positioned "absolute" with the full width/height set, and overflow set to hidden and it still doesn't work.
FYI: I also removed the CSS 1px border on the canvas too in case this was causing the canvas to grow larger than the screen size.
Is there any trick to get this to work? Even if it is programatic to detect a touch "swipe" event and "return false".