AS3 How to stop StageWebView stretching when run on a mobile

Question

I am making an Adobe Air application. When I run my application in flash my StageWebView object is positioned at x0, y0 how I want it. When compiled in Flash the StageWebview content takes up 320px by 50px. The flash stage is 480x800.

When I compile and run my application on a mobile device the StageWebview is stretched and leaks out the right side of the screen even though the Air native size and phone resolution is 480x800. The StageWebView content also gets scrollbars to view all of the content.

How do I get my device version to appear as my flash preview version?

Flash Code

imports
import flash.events.Event;
import flash.events.LocationChangeEvent;
import flash.geom.Rectangle;
import flash.media.StageWebView;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import flash.events.MouseEvent;
import flash.events.TouchEvent;

// setup variables
var _stageWebView:StageWebView;
var myAdvertURL:String = "website link here";
//

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT

function createAd():void {
  // check that _stageWebView doersn't exist
  if (! _stageWebView) {
    _stageWebView = new StageWebView () ;
    // set the size of the html 'window'
    _stageWebView.viewPort = new Rectangle(0,0,320,50);
    // add a listener for when the content of the StageWebView changes
    _stageWebView.addEventListener(LocationChangeEvent.LOCATION_CHANGING,onLocationChange);
    // start loading the URL;
    _stageWebView.loadURL(myAdvertURL);

  }
  // show the ad by setting it's stage property;
  _stageWebView.stage = stage;
}

function onLocationChange(event:LocationChangeEvent):void {
  // check that it's not our ad URL loading
  if (_stageWebView.location != myAdvertURL) {
    // stop the content from loading within StageWebView
    event.preventDefault();
    // Launch a normal browser window with the captured  URL;
    navigateToURL( new URLRequest( event.location ) );
  }
}

createAd();

HTML

    <!DOCTYPE html>
    <html>

    <head>
    <link href="layout-style-admob.css" rel="stylesheet" type="text/css" >
    <title>Admob</title>
    </head>

    <body>

    <script async src="xxxxxxx.js"></script>
    <!-- mobiletestad2 -->
    <ins class="adsbygoogle"
         style="display:inline-block;width:320px;height:50px"
     data-ad-client="xxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS

html,body {

}

body {
    min-width:320px;
    max-width:320px;
    width:320px;
    min-height:50px;
    max-height:50px;
    height:50px;

    margin:0px;
}

Any help would be greatly appreciated.

Is this a Flex project? If it is, the issue is likely DPI differences between runtimeDPI and applicationDPI and is easily fixed. — Josh
Are you manually setting the stage to 480x800 or is that the actual resolution of the device? — Josh
@PascalLeMerrer How so? You can use StageWebView on mobile to display local pages no problem. Getting the correct URL of the CSS file or any JS files will be difficult, however. (I highly recommend going with styles and scripts within the HTML rather than external if they are local files) — Josh

Anas Anas · Accepted Answer · 2014-03-07T19:06:30

Use the stage.stageWidth and stage.stageHeight:

 _stageWebView.viewPort = new Rectangle(0,0,stage.stageWidth,stage.stageHeight);

You also may need to listen to the orientation change event and update the view port acordingly.

for more info see this answer.

AS3 How to stop StageWebView stretching when run on a mobile

1 Answers