Test for Capabilities.screenDPI

January 6th, 2011 by Adrian

With all the interest in mobile development there come the issue of dynamically resizing UI elements based on the pixel density of the screen. For example, if a button is set to be 100 pixels wide, it will appear at different physical widths depending on the device being used. This is because your desktop monitor may have a pixel density (DPI or PPI) of 86dpi but you mobile phone may have a pixel density of 326dpi (as is the case with the retina display on the iPhone 4). This may meant that you nicely designed UI is unusable, with items being too small to click on with your finger!

An article regarding this was posted back in Jan 2010 on the Adobe Developer Connection by Christian Cantrell titled ‘Authoring mobile Flash content for multiple screen sizes‘, and more recently (Nov 2010) a whitepaper by Allen Ellison titled ‘Flash sizing Zen: Making Flash fit on mobile devices‘.

In Christian’s article he mentions using the AS3 Capabilities class and the method screenDPI, however as Renaun Erickson pointed out yesterday there is a problem with the returned value from this method when using AIR on devices.

Here is a little test SWF which shows you what Flash thinks your system is displaying (correctly or incorrectly).

Download a ZIP of the FLA source file here

An image of the various sample sizes can be viewed here

Confirming that 86 pixels equals 1 inch on my 19" (1280x1024) monitor

Here are some useful links regarding pixel density, DPI and PPI …

Posted in ActionScript 3.0, AIR, Android, Bug, Flash, iPhone, Mobile, Sample Code | 2 Comments »

2 Responses

  1. Bart Wttewaall Says:

    Hey thanks, you saved me some trouble here. I just set up a similar test swf; *delete* :)

    Cheers, Bart

  2. bepps Says:

    Pc always shows 72DPI.
    That’s weird as I want to make a game for both phone and pc and want elements to look more or less of the same size (a button can be too big for desktop or too small on mobile device).

    To say it’s not accurate is an euphemism… (according to it my monitor has a diagonal size of 70 cm…)

    Is there a way to get the real physical size of things or I must assume 72 dpi = desktop->generic layout and have a list of devices for other cases?

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.