How to differ between phones and tablets while developing in Flex mobile?

Question

I use applicationDPI in a Flex mobile card game:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.Menu"
    applicationDPI="160"
    initialize="init()">

    <fx:Style source="Preferans.css" />

    <fx:Script>
        <![CDATA[
            import spark.core.ContentCache;
            public static const AVATAR_CACHE:ContentCache = new ContentCache();

            public static var SCALE:Number;

            public function init():void {
                SCALE = runtimeDPI / applicationDPI;
            }   
        ]]> 
    </fx:Script>
</s:ViewNavigatorApplication>

And provide assets in 3 different resolutions based on it:

<fx:Declarations>
    <s:MultiDPIBitmapSource id="BACK"
        source160dpi="@Embed('assets/icons/low-res/back.png')"
        source240dpi="@Embed('assets/icons/mid-res/back.png')"
        source320dpi="@Embed('assets/icons/high-res/back.png')"/>
</fx:Declarations>

And still the result doesn't look good, when I for example select an iPad emulator in the Flash Builder 4.6:

While selecting Google Nexus One produces better result:

What to do here, what to use for detection of a phone vs tablet device?

Checking screen resolution wouldn't help here - see the above iPad example (low resolution, but big screen).

Answer 1

  public static function get isTablet():Boolean  
    { 

       var deviceWidth:Number = Capabilities.screenResolutionX / Capabilities.screenDPI;

       var deviceHeight:Number = Capabilities.screenResolutionY / Capabilities.screenDPI;

       var diagonalInches:Number = Math.sqrt((deviceWidth * deviceWidth)+ (deviceHeight *    deviceHeight));
      if(diagonalInches>=7)
          return true;
      else
          return false;
    }

Answer 2

For a project I did for work, I had to evaluate the exact same issue. To do so, I created a new class that was run on app init that would evaluate the device and make some decisions.

Essentially, I did this

var deviceWidth:Number = Capabilities.screenResolutionX / Capabilities.screenDPI;
var deviceHeight:Number = Capabilities.screenResolutionY / Capabilities.screenDPI;

That will give you the device width and height on the majority of devices. The screenDPI property is not always accurate, however, so this will not work 100% of the time. It works often enough, however, that I don't think it is an issue.

From there, I did some research. I found that point where a phone stopped being a phone and started being a tablet. There is no standard approach, so I took the smallest popular tablet I could find (at the time, the Blackberry Playbook or Kindle Fire, can't remember which), and used the dimensions of that screen as the breakpoint between phone and tablet.

if ( deviceWidth >= fireWidth && deviceHeight >= fireHeight ) {
    isTablet = true;
}
else {
    isPhone = true;
}

That's pseudo code, obviously, but you get the idea. I also threw in some checks to distinguish between each platform (iOS, Android, and Desktop) and, if it was iOS, I manually set whether it was a tablet or phone because there is a limited field of devices there.

From there, I had two interfaces. One for phones, one for tablets. In the addedToStage function for my Application class, I used the isPhone and isTablet checks to choose which interface to load.

Probably not how it is supposed to be done, nor is it fool proof. Unfortunately, though, that is the closest we can get to a universal application with device-specific interfaces in Adobe AIR, as far as I am aware.