Constraining the viewport for mobile/tablets

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

Cheers,

Steve

Are you exporting in fullscreen mode with the Touch object in your project? In this case it should automatically block any touches from swiping the page. If you don't run in fullscreen mode it assumes the game is embedded on a HTML page with other content and lets you still swipe the page. Also, in fullscreen mode, Construct 2 automatically adds those viewport tags to keep the viewport fixed.

Also, what device are you testing on? iOS works fine, but Android 2.x has some issues where you can still swipe the page, because the Android browser does not currently properly support multi-touch.

Ah ha! I presumed that fullscreen mode applied "stretching" to fit the browser screen (undesired) thus avoided using it. Since that doesn't appear to be the case, I'll try the fullscreen option.

As for devices... I was testing on a few... iOS (phone/tablet), & BlackBerry (phone/tablet)

Cheers,

Steve