as3 air and screen size dection issue on devices

Question

I have worked so hard on an app that displays perfectly on my Galaxy Note 3. However, it does not display right on iPhone and also one other Droid I tested on. My issue is with addChild() and then resizing it to fit the screen. For some reason when I add the Background (addBG(); The screen size works but if I load addChild to the BG, this works great on my Note 3 but not on the iPhone or another android device.

My issue is with the screenX, screenY var I created. They seem to be different for devices. Or it is a "rendering order issue" I am not sure. Would be so greatful for the help to fix this issue so it looks great on each phone. I have read some tuts on this subject but they are confusing. I think my code is close, I hope, and maybe it just needs a tweak. !

Here is a shot of the about screen on an IPhone. See the white does not fit the whole screen.

and Here is a shot from my Droid Note 3.

Declared Vars in a package:

This is not my full code, of course but only that which I believe is relevant.

public var screenX:int;
public var screenY:int;


   public function Main()
    {
        if (stage)
        {

            setStage();
            addBG();    
        }
    }

    public function setStage()
    {
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;

        if (flash.system.Capabilities.screenResolutionX > stage.stageWidth)
        {
            screenX = stage.stageWidth;
            screenY = stage.stageHeight;
        }
        else
        {
            screenX = flash.system.Capabilities.screenResolutionX;
            screenY = flash.system.Capabilities.screenResolutionY;
        }
    }

This works: addBG();

            public function addBG()
    {
        theBG = new BG();
        addChild(theBG);
        theBG.width = screenX;
        theBG.height = screenY;
    }

This does not: addAbout();

public function addAbout()
        {

            About = new viewAbout();
            About.width = screenX;
            About.height = screenY;
            theBG.addChild(About);
            TweenMax.fromTo(About,1, {alpha:0}, {alpha:1, ease:Expo.easeOut}  );

        }

UPDATE: And yet another more complex load is also called from a button and having the same issue. I hope you see the logic of what I am trying to do. First set the BG to the device then load and resize content to fit proportionally into the BG I loaded. The reason being, the BG will be distorted to different proportions and that's ok, but the content can not. So here is the example that loads content into the BG and then content into that container.

public function addRosaryApp()
        {
            Rosary = new viewRosaryApp();
            Rosary.width = screenX;
            Rosary.height = screenY;
            theBG.addChild(Rosary);
            TweenMax.fromTo(Rosary,1, {alpha:0}, {alpha:1, ease:Expo.easeOut}  );

            contentRosary = new contentRosaryApp();
            theBG.addChild(contentRosary);
            contentRosary.width = screenX;
            contentRosary.scaleY = contentRosary.scaleX;
            contentRosary.x = screenX/2 - contentRosary.width/2;
            contentRosary.y = menuBanner.height;    
        } 

Answer 1

I think your problem may have to do with either of several things. My findings so far from my own devices (an Ipad Air, an iphone 4S, an LG G2 and an Acer Iconia A500) is that the only device size that's being reported correctly at all times is the stage.fullScreenWidth and the stage.fullScreenHeight

1st, Android reports Capabilities.screenResolutionX as the LONG side of your Android device. IOS devices however report the SHORT side of your device to Capabilities.screenResolutionX.

2nd, stage.stageWidth and stage.stageHeight seem to report the wrong size on both Android and IOS. And in fact if you check these before and after setting stage.scaleMode and stage.align then the values will differ completly (although Android will show it almost correctly).

My suggestion is that you set a base size (width and height) for your app and then compare it with the actual stage.fullScreenWidth and stage.fullScreenHeight reported by the device. That way you can get some nice scaleratios to use to scale your displayobjects. That's what I'm currently on my apps and it scales just fine :-)

Answer 2

Have you tried adding the child to stage first, and then setting the size? That's the only difference I can see between addBG and addAbout

        About = new viewAbout();
        theBG.addChild(About); // do this first
        About.width = screenX; // then set width 
        About.height = screenY; // and height