Kai Hartmann Posted February 22, 2014 Share Posted February 22, 2014 Hello, I have a simple HTML page, which implements just a canvas. When I show it in a browser, everything looks ok, no scrollbars at all. After deploying it with PhoneGap to my device (Sony Experia U), it is possible to scroll just a little horizontally and a little more vertically.I am sure it is because the device has a different aspect ratio and the content (1280 x 720) does not fit, but giving 100% to width (and height) of the canvas should do the trick. I do not know how to prevent the scrolling. Anybody had this problem, and/or does have a solution? This is my complete source: HTML:<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Game</title> </head> <body> <canvas id="game" width="1280" height="720" style="border:1px solid #000000;"></canvas> </body></html>CSS:html, body { margin: 0; overflow:hidden;}canvas { width: 100%; height:100%;} Quote Link to comment Share on other sites More sharing options...
away168 Posted February 22, 2014 Share Posted February 22, 2014 Try adding this in your HTML <head>:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />And try to add/append this in your JavaScript (I forgot is it both or just touchstart):window.addEventListener("touchstart", function(e) { e.preventDefault();}, false);window.addEventListener("touchmove", function(e) { e.preventDefault();}, false); Quote Link to comment Share on other sites More sharing options...
Kai Hartmann Posted February 22, 2014 Author Share Posted February 22, 2014 The meta tag did not help, but the JavaScript does. Thanks.I had hoped to do it declaratively, though. I am also not totally sure what the meta viewport tag does, cause I tried it before, and it never seems to have any effect, regardless what I sepcify in the content attribute. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.