• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Flex Mobile project scaling with Retina display iPad (3rd gen).

Engaged ,
Mar 19, 2012 Mar 19, 2012

Copy link to clipboard

Copied

Adobe et al,

With the new iPad 3 we now have a ton more pixels to utilize. I'm familiar with and have already successfully tested the AIR 3.1+ commandline compiler option (-platformsdk) to get Retina display on the new iPad. In ActionScript mobile projects the content is rendered beautifully on the new iPad. But with Flex Mobile projects, something is happening that causes it to render incorrectly. It's retina display alright, but the size is way too small.

Below is an image WITHOUT the -platformsdk build tag, that causes the app to be pixel doubled to fit on the new iPad:

FB_Non_Retina.PNG

Notice that it's scaled proportionally, even though the text and components are slightly pixelated. Not a big deal, but noticeable on the device.

This image is taken with the app rendering in Retina display (setting the -platformsdk pointing to iOS 5.1 SDK):

FB_Retina.PNG

As you can see, the text/components are rendered really clear, but the scale is way off. Obviously it's getting the width of 2048x1536 from the device, but it's way too small.

How do I fix this? I've tried changing the applicationDPI, but it doesn't fix it. Setting a width/height of 1024x768 does nothing either. It seems we need to overrride a behavior that causes it to fit everything in so small.

A little help?

Thanks,

iBrent

Views

22.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Mar 20, 2012 Mar 20, 2012

Richard Lord posted a blog yesterday Using the iPad retina display with Adobe Air and one of the things I noticed is that the new iPad returns a DPI of 132, the specs say the device is 264 ppi. I don't have one of the new iPads, so I can't test this, but it sounds as though this is just a case of the device returning the wrong DPI which is something that has happened before. I'd check the section on this page entitled "Override the default DPI" and see what happens if the device were to return 2

...

Votes

Translate

Translate
Engaged ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

Can anyone tell me if they're looking into this? The biggest problem is that it essentially renders Flex USELESS for iPad apps. I realize Adobe has dropped Flex, but this is a concern with the existing 4.6 SDK, and it would great to get a resolution to this problem before jumping to Apache Flex to find a solution. (Did you see what I said there, "resolution" to the problem) 😉

iBrent

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

i see same issue, would be nice to see solution... we still using flash as base so we would manually adjust grapics

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

Richard Lord posted a blog yesterday Using the iPad retina display with Adobe Air and one of the things I noticed is that the new iPad returns a DPI of 132, the specs say the device is 264 ppi. I don't have one of the new iPads, so I can't test this, but it sounds as though this is just a case of the device returning the wrong DPI which is something that has happened before. I'd check the section on this page entitled "Override the default DPI" and see what happens if the device were to return 240 when running on the new iPad.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 20, 2012 Mar 20, 2012

Copy link to clipboard

Copied

i will ask my devlopers to try that and see if element will get right size on the screen

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Mar 21, 2012 Mar 21, 2012

Copy link to clipboard

Copied

Alright, kevinkorngut's answer was the right one. It appears that even though AIR 3.x can render high resolution apps, it still returns the incorrect DPI for the new iPad. In a Flex Mobile project you have to override the DPI using the method mentioned above.

Here are the results I got:

Retina.png

Using the runtimeDPIProvider property on the TabViewApplication tag (works for any of the three project types) I created a class that extends RuntimeDPIProvider. To detect which iPad I was on, I used the following code:

override public function get runtimeDPI():Number

{

     var os:String = Capabilities.os;

     if(os.indexOf("iPad") != -1)

     {

          if(Capabilities.screenResolutionX > 2000 || Capabilities.screenResolutionY > 2000)

          {

               return DPIClassification.DPI_320;

          } else {

               return DPIClassification.DPI_160;

          }

     } else {

          return Capabilities.screenDPI;

     }

}

I'm returning a DPI of 320 as this gives the best result that matches the proportions of the device. In other words, even though the iPad DPI is 264, setting the app to 320 gives the correct size at the new Retina display.

In order for this to work, you must compile the app with the -platformsdk flag pointing to iOS 5.1 SDK, and currently that means you need a Mac running Lion with Xcode 4.3.1. Here's the adt command I used:

adt -package -target ipa-test -storetype pkcs12 -keystore ~/Desktop/iOS_DevCert.p12 -provisioning-profile ~/Desktop/iOS_DevProfile.mobileprovision newiPadTest.ipa newiPadTest-app.xml newiPadTest.swf -platformsdk /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.1.sdk

Also, the -app.xml descriptor file must have the <requestedDisplayResolution>high</requestedDisplayResolution> within the <iPhone> tags.

Thanks everyone for their replies!

iBrent

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 22, 2012 Mar 22, 2012

Copy link to clipboard

Copied

nice, thanks a lot!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2014 Mar 16, 2014

Copy link to clipboard

Copied

I'm facing the same issue updating an existing application to display properly on an iPad Mini with Retina display iOS 7.0.4 The application appears to use the full resolution of the device (no stretching or scaling - high resolution) however the UI elements are rendering small similar to the screenshots above.

A test revels that Capabilities.screenResolutionX and Capabilities.screenResolutionY return 768 x 1024. ScreenDPI is returning 132.

I'm compiling on a Mac and have tried using iOS 7.0, 6.0 and 5.1 - no changes. I've tried AIR 3.7 and AIR 4.0 (which, AIR 4.0 is now a requirement for an app approval by Apple).

I've tried Flashbuilder and the commandline compiler (with no errors/warnings).

Using: requestedDisplayResolution: high

           UIDeviceFamily 1 and 2 (both iPhone and iPad support)

Since Capabilities.screenResolution is returning the incorrect values runnin on the device, I'm not able to override the runtimeDPI as suggested above.

Here is my test code:

https://www.dropbox.com/s/u072ou6enxa54k9/src.zip

Thanks for any help or suggestions!

Steve

Output from app running on iPad Mini w/ Retina display:

Capabilities.screenResolutionX: 768

Capabilities.screenResolutionY: 1024

Capabilities.screenDPI: 132

stage.stageWidth: 1024

stage.stageHeight: 768

stage.fullScreenWidth: 1024

stage.fullScreenHeight: 768

retinatTestScreenShot.png



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 18, 2014 Mar 18, 2014

Copy link to clipboard

Copied

As a test for just the iPad mini, I forced get runtimeDPI() to return DPIClassification.DPI_320. This improved the layout however the fonts I speicifed in the CSS were locked into the font size specified for @media (application-dpi: 160). That leads me to belive that the CSS styles are not dereived from get runtimeDPI().

 

Regardless, if I can get the iPad mini w/ retina to correctly return the Capabilities for screenDPI and resolution - my problem would be solved.

 

Is there any additional information I can provide in order to help udnerstand what's going on?

 

Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 18, 2014 Mar 18, 2014

Copy link to clipboard

Copied

Just came across this note in the Apache Flex 4.12 SDK change log:

https://dist.apache.org/repos/dist/release/flex/4.12.0/RELEASE_NOTES

- Changed DPI to be 160 for iPad/iPad mini and 320 for iPad retina/iPad mini retina.

This will likely not be a solution I can use since the app must use one of the Adobe SDKs.

So the question still remains - why is the iPad mini w/ Retina reporting the screen resolution capabilities of 768x1024 and a DPI of 132? If the capabilities were reporting correctly, I could override the dpi as Brent mentioned above. I'm not sure if that would solve the CSS dpi selector issue.

Any ideas?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Apr 15, 2014 Apr 15, 2014

Copy link to clipboard

Copied

LATEST

I'm using Apache SDK 4.12 on a PC - with FlashBuilder 4.7 and SDK of 4.12, is it still necessary to point to iOS 5.1 SDK during compile?

I've tried both ways on Mac and Windows and my iPad mini w/ retina is still reporting:

Capabilities.screenResolutionX: 768

Capabilities.screenResolutionY: 1024

Capabilities.screenDPI: 132

Test code is here:

https://www.dropbox.com/s/u072ou6enxa54k9/src.zip

Please let me know what else I can provide in order to help troubleshoot.

Thanks!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 02, 2012 Jul 02, 2012

Copy link to clipboard

Copied

Hi,

I just followed the procedure .I set the applicationDPI as 160 and it shows all the UI elements perfectly in both ipad2 and 3.

But there is an issue in localToGlobal() . This method returns different values for ipad 2 and 3 and makes so many issues on screen.

Did any one else experienced the same behavior..?Please can some one verify it..

Any implementation of localToGlobal or globalToLocal will replicate the issue.(tried localToGlobalContent as well with the same result)

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Dec 13, 2012 Dec 13, 2012

Copy link to clipboard

Copied

Not sure whether globalToLocal / localToGlobal bug could be anything to do with this?

https://bugs.adobe.com/jira/browse/FB-35856

G

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines