Question

I’m working on an Android app with Phonegap, using HTML/Canvas, Javascript and CSS. With the code below I am stretching the canvas to full screen.

var canvas = $("#mycanvas");
var ctx = canvas.get(0).getContext("2d");
canvas.attr("width", $(window).get(0).innerWidth);
canvas.attr("height", $(window).get(0).innerHeight);
ctx.clearRect(0, 0, canvas.width, canvas.height);

I have also fixed landscape view in the AndroidManifest.xml file.

android:screenOrientation="landscape"

And in config.xml I call for a full screen.

<preference name="fullscreen" value="true" />

So far so good, but there’s one big problem. I can scroll my app from the screen, although there is no content there. I see only a dark grey background.

Does anyone have any ideas how to solve this? I would appreciate it.

Answer 1

I’d recommend you have a go at it with the Viewport Meta-tag. this will make your html document scale properly.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag