Sign in to follow this  
Kai Hartmann

Prevent scrolling in on Android WebView (PhoneGap)

Recommended Posts

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%;}
 

 

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.