Below this is my solution that allow using device DPI, taking advantage of retina display, but allowing upper limiting resolution (e.g. to 1024x768) to avoid stretching assets, image backgrounds and so on. Rotation is also taken into account.
Graphically, the 1024x768 (or whatever you want) box is centered into the bigger display, and surrounded by a colored border (e.g. black border). this is the same solution adopted by Adobe on the new iPhone 5 for older app optimized for iPhone 4 resolution (they'll have vertical black rows on borders):
Application mxml:
remove applicationDPI attribute to allow using device DPI (according to documentation)
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HomeView">
for every view: surround the whole content with a <s:Group> tag like this:
<s:Group clipAndEnableScrolling="true" horizontalCenter="0" verticalCenter="0"
width.horizontal="{Math.min(width, 1024)}" width.vertical="{Math.min(width, 768)}"
height.horizontal="{Math.min(height, 768)}" height.vertical="{Math.min(height, 1024)}">
then create the two states:
<s:states>
<s:State name="vertical"/>
<s:State name="horizontal"/>
</s:states>
and set a resize handler in root tag to set the current state according to device orientation:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:ns1="*"
resize="view1_resizeHandler(event)">
in <fx:Script>:
protected function view1_resizeHandler(event:ResizeEvent):void
{
if(width > height)
currentState = 'horizontal';
else
currentState = 'vertical';
}
