AS3 How to stop StageWebView stretching when run on a mobile

StackOverflow https://stackoverflow.com/questions/22234136

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.

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top