Skip to main content
Inspiring
December 12, 2017
Answered

Air for IOS check resolution for iPhone X, iPhone 8 Plus

  • December 12, 2017
  • 3 replies
  • 1785 views

Hi,

Is this the best way to determine which iPhone the user is using? When I test on Apple Simulator, iPhone 8 Plus and iPhone X work, but when I test on device, the screens come up black after the splash screen is shown. Thanks in advance.

this.stop();

import flash.system.Capabilities;

var xRes: Number;

var yRes: Number;

xRes = Capabilities.screenResolutionX;

yRes = Capabilities.screenResolutionY;

var appMode: String;

var xSet: Number;

var ySet: Number;

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

function checkRes(): void {

  var placeApp: MovieClip;

  trace("checkRes init");

  if (yRes == 2436 && xRes == 1125) {

  placeApp = new mode_iPhoneX();

  trace("iPhone X");

  ySet = 0;

  xSet = 0;

  placeApp.x = xSet;

  placeApp.y = ySet;

  addChild(placeApp);

  } else if (yRes == 2208 && xRes == 1242) // iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus

  {

  placeApp = new mode_iPhone8Plus();

  trace("iPhone 8 Plus");

  ySet = 0;

  xSet = 0;

  placeApp.x = xSet;

  placeApp.y = ySet;

  addChild(placeApp);

  } else if (yRes == 1334 && xRes == 750) // iPhone 8, iPhone 7, iPhone 6s, iPhone 6

  {

  placeApp = new mode_iPhone8();

  trace("iPhone 8");

  ySet = 0;

  xSet = 0;

  placeApp.x = xSet;

  placeApp.y = ySet;

  addChild(placeApp);

  }

}

checkRes();

This topic has been closed for replies.
Correct answer builder623

I recently went with only checking for screen width. I load a version of the splash screen to my stage with the following:

(though mine is Landscape only)

var screenwidth: int = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

var screenheight: int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

function loadSplash(): void {

       switch (screenwidth) {

                case 960:

                      device = "iPhone 4S"

                      newSplash = new iPhone4Splash();

                      addChild(newSplash);

                     break;

                 case 1136:

                      device = "iPhone SE"

                      newSplash = new iPhone5Splash();

                      addChild(newSplash);

                      break;

                 case 1334:

                      device = "iPhone 8"

                      newSplash = new iPhone6Splash();

                      addChild(newSplash);

                      break;

                 case 2208:

                      device = "iPhone Plus"

                      newSplash = new iPhone6PSplash();

                      addChild(newSplash);

                      break;

                 case 2436:

                      device = "iPhone X"

                      newSplash = new iPhoneXSplash();

                      addChild(newSplash);

                      break;

                 case 1024:

                      device = "iPad"

                      newSplash = new iPad2Splash();

                      addChild(newSplash);

                      break;

                 case 2048:

                      device = "iPad Air"

                      newSplash = new iPadAirSplash();

                      addChild(newSplash);

                      break;

                 case 2732:

                      device = "iPad Pro"

                      newSplash = new iPadAirSplash();

                      addChild(newSplash);

                      break;

                 default:

                      device = "iPad"

                      newSplash = new iPad2Splash();

                      addChild(newSplash);

                      break;

            }

         trace (device);

}

3 replies

builder623Correct answer
Inspiring
December 12, 2017

I recently went with only checking for screen width. I load a version of the splash screen to my stage with the following:

(though mine is Landscape only)

var screenwidth: int = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

var screenheight: int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

function loadSplash(): void {

       switch (screenwidth) {

                case 960:

                      device = "iPhone 4S"

                      newSplash = new iPhone4Splash();

                      addChild(newSplash);

                     break;

                 case 1136:

                      device = "iPhone SE"

                      newSplash = new iPhone5Splash();

                      addChild(newSplash);

                      break;

                 case 1334:

                      device = "iPhone 8"

                      newSplash = new iPhone6Splash();

                      addChild(newSplash);

                      break;

                 case 2208:

                      device = "iPhone Plus"

                      newSplash = new iPhone6PSplash();

                      addChild(newSplash);

                      break;

                 case 2436:

                      device = "iPhone X"

                      newSplash = new iPhoneXSplash();

                      addChild(newSplash);

                      break;

                 case 1024:

                      device = "iPad"

                      newSplash = new iPad2Splash();

                      addChild(newSplash);

                      break;

                 case 2048:

                      device = "iPad Air"

                      newSplash = new iPadAirSplash();

                      addChild(newSplash);

                      break;

                 case 2732:

                      device = "iPad Pro"

                      newSplash = new iPadAirSplash();

                      addChild(newSplash);

                      break;

                 default:

                      device = "iPad"

                      newSplash = new iPad2Splash();

                      addChild(newSplash);

                      break;

            }

         trace (device);

}

Colin Holgate
Inspiring
December 12, 2017

Using these lines:

stage.scaleMode = StageScaleMode.NO_SCALE;

stage.align = StageAlign.TOP_LEFT;

will mean that a lot of things AIR would do for you, you'll have to do for yourself. If you left the scale mode and align at their default values you could have the different versions of the experience be the same size on your stage, and inside each movieclip would be the different resolution versions. So, an object that needed to be 500 pixels wide on your stage would have a 500 pixel image inside the movieclip, for old devices to use, and in the new devices version the image would be 1000 pixels across, but at 50%. Its original detail will get revealed on the higher resolution screens. Now, you could take on all the the tasks, and then you would need movieclips that were a different size, for each type of device.

In your example code you're not allowing for devices that are not one of those three. You could change the last part, and give all other devices the iPhone 8 version:

} else {
placeApp = new mode_iPhone8();
trace("iPhone 8",yRes,xRes);
ySet = 0;
xSet = 0;
placeApp.x = xSet;
placeApp.y = ySet;
addChild(placeApp);
}

}

Note the extra trace for xRes and yRes, that will help you to figure out what's going wrong.

I still think it's worth trying one size that is detailed enough for higher end devices, see if they scale down without performance problems for lesser devices, and you could even not do the very highest resolution. Let the interface scale up a bit, it may look fine.

pravishtis
Adobe Employee
Adobe Employee
December 12, 2017

Hi,

To determine which iPhone the user is using, can you please check once with Capabilities.os (Capabilities - Adobe ActionScript® 3 (AS3 ) API Reference). It gives a unique value for every device.

Thanks,

Pravishti | Adobe AIR Engineering