How to scale web view for Android phones and tablets?

[gecko64]

 I trying to figure out how to have our app scale properly for Android phones and tablets. I am testing with a phone that has 853x480 resolution, and tablets with 1280 and 2500ish wide resolutions. The HTML canvas is 960p wide, and I have got a version of the viewport tag that forces it to scale down to fit on the phone screen. But I cannot find any viewport settings that make it scale up properly on the larger resolutions (even assuming a separate build for those resolutions). It's always true resolution--so there's some or a lot of black space around the HTML canvas.  Is there a way to force it to go fullscreen on larger resolutions?

(This is a complex game interface so responsive design is not an option.)

thanks

Dave

[WebSteve]

You want it to go full screen and NOT be responsive design?

[gecko64]

I want the 960x600 canvas to stretch to fill the screen, whatever the screen's resolution is. For some devices, that means scaling down; for others, scaling up. (The aspect ratio is taller than many Android devices, so the scaling should be based on canvas/screen height, not width.)

[Rahul]

Have you seen this -

http://stackoverflow.com/questions/8625208/working-with-canvas-in-different-screen-sizes

[gecko64]

Thanks for the link. That might work, but I hope we don't have to revise our HTML. The app scales perfectly in iOS; it's just in Android that I can't find any parameters in the config.xml file that will work -- across all devices, or even within the tablet resolution range. 

[Gaz]

There is some code you need to add to your java files to get this to work. Do a search of the forum for fixed width android viewport and you should find it.

Then put your canvas into a container div. At start up, get the screens aspect ratio using window innerWidth and innerHeight, work out the width your container div needs to be to fill the screen using the canvas height as the height, and set the containers width to that value. Then, using JavaScript, alter the viewport meta tag so that it contains width=TheNewWidth and whatever else you need in there.

Gaz

[Rahul]

What is the meta viewport tag you are using?

[gecko64]

Here's what I'm using in the config.xml file

For phones (so it scales down from 960p wide to smaller resolutions -- this works fine):

<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7, minimum-scale=0.7, user-scalable=yes" />-->

Here's what I currently have for larger-than-960 resolutions, but it does not scale up; it displays actual resolution, so there is a lot of black space/margin around the html canvas:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

[Rahul]

Hi,

Viewport tag should be in the index.html file?

What happens when you add target-densitydpi=device-dpi in the viewport tag? 

[Rahul]

Fogot to add this - 

You can also try by adding following in your main activity java file in the onCreate() method  - 

WebSettings webSettings = appView.getSettings();

webSettings.setUseWideViewPort(true);

webSettings.setLoadWithOverviewMode(true);

[gecko64]

Right, it's in the index file, not config. 

I'm using phonegap build, so don't have any java files to work with. I've tried the target-density but didn't find any way to make it help here. What would you suggest setting it at for this problem? The problem is about overall pixel resolution, not pixel density.

thanks

Dave

[gecko64]

We've tried everything we can think of. We even added another <div> to the HTML, setting the page at 1140 pixels wide (so closer to the aspect ratio of Android devices) -- but the Phonegap build still zooms in about 20%, cropping off the lower portion of the game canvas. I've tried about 50 variations on the viewport tag. Surely there's a way to make the app scale up or down to fill the device screen? 

[gecko64]

To recap: I have an HTML game that's built for 960x640 resolution. On iOS, it scales up perfectly to fill the screen (more or less) on every device. But on Android, on screens larger than 960x640, the app either:

a) displays at fixed resolution (if I use target-density), so it too small on the screen.

b) Scales up based on width -- but because the aspect ratio of 960x640 is taller than most (or all?) Android devices, the bottom 20% of the game is below the edge of the screen, requiring scrolling. We've tried workarounds: adding an extra <div> that sets 1140 as the width, but the Android device seems to somehow knows that the extra width is not important and so it zooms in to the 960 width. 

Surely there's a way to make it scale up according height, or to make it respect the 1140 width? 

[gecko64]

Now we've created a simple html page with the content set to 1140x640 -- nothing in it but that div tag and an image inside it. And in a Phonegap build, I cannot get it to scale properly. It zooms in about 20%, so there is vertical and side-scrolling. Surely there's something simple that I'm missing?

Here is that test page code (I've also tried device-width in the meta tag, no difference):

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Android test</title>

<meta name="viewport" content="height=1140, width=640, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes"/>

<style type="text/css" media="screen">

<!--

body,html {padding:0px; margin:0px; background-color:#000000;}

div,p {font-family:Helvetica,"Helevetica Neue","Helvetica Bold",Arial,sans-serif; color:#ffffff; text-align:center;}

#content {width:1140px; height:640px; margin-left:auto; margin-right:auto; background:transparent url(images/test.jpg) no-repeat;}

-->

</style>

</head>

<body>

<div id="content">

<div><br /></div>

<div style="font-size:110px; font-weight:bold; padding-top:200px;">TEST</div>

</div>

</body>

</html>

[Rahul]

Try this viewport - 

<meta name="viewport" content="width=640px, initial-scale=0.5, maximum-scale=0.5" />

[gecko64]

Thanks! Unfortunately, that is no different -- on the device (resolution 1280x800), it's still zoomed in by about 20%. Any other suggestions?

[Mobile Development]

The html code which you pasted in your previous comment is currently what you are trying to View and their is no other code, no CSS or media qureries? Also you are using Phonegap build service? I have never used a Phonegap build service but will give it a try. 

[Rahul]

I found this also -

http://stackoverflow.com/questions/13584480/android-webview-disable-automatic-zoom

[gecko64]

Yes, I am using Phonegap Build. I think there is a bug in it (or in Android+Phonegap Build) that prevents proper scaling, but I don't understand how that could be the case -- wouldn't everyone complain? 

Yes, that sample html is the only file. (There is also a graphic, but that is simply to help show whether the page is zoomed in or not.)

[Gaz]

For the scaling to work, you will need to add the lines of code mentioned earlier to the java code. If you can't do that with build, then there would be two options - build it yourself and make those changes, or make a plugin with that code that you can use with build.

Ideally, this should be made into a configuration option in Androidl to match the iOS EnableViewportScale option.

Gaz