Adobe Air - Mobile Width and Height

Question

I have written my first mobile AIR app. On my iPad, the layout is a dismal failure. It looks perfect in the Flash Builder simulator.

I have the application set up to run in portrait mode with no auto-orientation. It starts at 160 DPI and scales up. When the application is complete, I get the width and height of the stage, and then use these numbers to calculate the layout of all of my buttons and column widths for my datagrid. When I load the app on the iPad, all of the buttons are spread way too far apart, several running off the screen. The datagrid is all supposed to fit on the screen but four of the columns ran off the screen.

It is almost as if it calculated the width of the screen in landscape mode instead of in portrait mode. So I have two questions:

1) If you layout the application in portrait orientation, is the width of the stage the width in portrait orientation or landscape orientation?

2) I am confused on how to lay everything out on mobile devices with varying screen densities. Is it better to get the app width and height and then set up distances and spacing in pixels, or to use percentages?

Thanks for any insight. This was disappointing.

Edit: When the application is complete, I dispatch a custom event to let the rest of my components know that the app is loaded so that they can then get the width and height of the app and lay themselves out appropriately. In my main app, I have this code:

protected function appCreationCompleteHandler(event:FlexEvent):void {   
    // Dispatch an event to the rest of the application that the application is complete so that I can calculate all of my layout distances 
    var e:Event = new Event("appComplete", true); 
    dispatchEvent(e); 
    appWidth = stage.stageWidth; 
    appHeight = stage.stageHeight; 
}

In my application descriptor file, I have the following values set:

<aspectRatio>portrait</aspectRatio>

<autoOrients>false</autoOrients>
<fullScreen>true</fullScreen>
<visible>true</visible>
<softKeyboardBehavior>pan</softKeyboardBehavior>

I feel like it has to be something in my descriptor file, because it is laid out perfectly in the simulator, just not on the device. The height values appear to be correct on the device, but the width layout is just WAY off.

Philarmon Philarmon · Accepted Answer · 2016-10-17T07:32:00

The problem is probably that the screenWidth and screenHeight are still returning the real width and height but since you are setting the DPI to a fixed value the actual visible area is smaller than that ?

You could use the Capabilities.screenDPI to recalculate the real size but the problem is that it is highly unreliable on many devices (means it returns a wrong DPI).

Try to get the width and height with the Screen class:

var screen:Screen = Screen.getScreensForRectangle(stage.nativeWindow.bounds)[0];
var width:int = screen.visibleBounds.width;
var height:int= screen.visibleBounds.height;

Adobe Air - Mobile Width and Height

2 Answers