Zoom/Scaling issues with StageWebView and Android

2
votes

I have a Flex Mobile application that is making use of StageWebView to load a local HTML file.

I have been debugging it on my PC using the inbuilt Emulator (simulating a Galaxy S3 screen, 1280x720, 320dpi) and on my actualy S3.

The app has the StageWebView viewPort set to a rectangle that uses the stageHeight and stageWidth. (1280x720)

On the PC, it displays the HTML file fully (the HTML file has a background image that is 1280x720) and there is no scrolling.

On my phone however, the webview shows the HTML file "zoomed" in (I say zoomed in, but you cannot in fact, zoom out!) and I has to scroll to view all the content. The content appears at twice the size (If i set the background image to 360x640, it fits on the phone screen without scrolling)

Why would the emulator, set to the same resolution and DPI, show the content differently?

More importantly, why is my phone seemingly "zooming" in on the HTML file and making me scroll? The content and phone resolution match, yet StageWebView does not seem to understand.

I found this post, click me, that seems to suggest there is a bug, however the guy mentions his issue is when he doesn't use the viewport meta tag, which I am using!

Does any one know how I can go about fixing my scaling issues and hopefully have my Flex application scale nicely over various devices and have StageWebView display my HTML file correctly?

2
actionscript-3apache-flexairloaderflex-mobile

2 Answers

2
votes

If you're using meta viewport on android make sure to set target-densitydpi value

<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">

Or if can using css zoom, where zoom value is related to density-independent pixels (DP) value compare to html page size

Check out this article on Adobe

0
votes

I was banging my head against the wall with the same problem. On the Xoom (Android 3) the local file displayed perfectly, but on the Nexus (Android 4.2.2), the content wasn't displaying correctly with stagewebview.

My solution was to change the href of the css tag. See here:

How to reference local css files in a static webview window in android dev?.

So in my local HTML file, it changed to: 

<link rel="stylesheet" href="file:///styles/style.css" type="text/css" />