Comparing CSS Media Queries vs. Application Scaling

If you haven’t heard of either of these features in Flex 4.5, here’s a quick summary:

  • CSS Media Queries – Conditionally apply styles at runtime based on the DPI and/or OS of the target device
  • Application Scaling – When the application specifies an applicationDPI value, Flex applies a scale factor to the root application. The result is an application designed for one DPI value scales to look good on another device with a different DPI value.

The Flex 4.5 reference covers the differences in the two approaches to adapting a mobile application based on DPI. The documentation also spells out the steps it takes to implement each approach.

Testing both approaches is also straightforward. Flash Builder 4.5 can simulate screen resolution and DPI when you run your application in ADL on your PC. However, it’s not the same as seeing the results on an actual device at the real physical size.

I’ve put together some quick examples to demonstrate each approach and I’ve taken a few photos of actual devices to see the final result. I have 3 devices, going left to right:

  • Motorola Droid Pro, 320×480, DPI Classification = 160
  • HTC EVO, 480×800, DPI Classification = 240
  • iPod Touch 4th Gen, 640×960, DPI Classification = 320

The picture below shows 3 different applications:

  1. Application scaling is turned ON (applicationDPI=160) in the main Application tag. What this means is that I’ve designed my application with 160 DPI devices in mind. Flex will scale the entire application by a scale factor based on the runtimeDPI classification. From left to right you can see 1x, 1.5x and 2x scaling.
  2. Application scaling is turned OFF (applicationDPI is not set). At each DPI, I’ve adjusted my slider to a fontSize value that is readable based on the runtimeDPI of the device.
  3. Application scaling is turned OFF (applicationDPI is not set) but I’ve set single explicit fontSize value that is used for all 3 DPI classifications. Do not do this. As you can see, if you set an explicit fontSize for all 3 DPI classifications, you’ll run into issues at one end or the other. In this case, fontSize 16 is far too small on the iPod Touch.

 

What I should have done in the last scenario is define CSS style rules with media queries that select a proper fontSize based on the DPI of the device. I’ll use a simple label as my next example. The code below has scaling turned off, but this time I’ve defined a stylename with different fontSize values per-DPI classification.

In my ViewNavigatorApplication, I’ve turned off scaling:

<s:ViewNavigatorApplication> <!-- scaling is OFF when applicationDPI is not set-->
  ...
</s:ViewNavigatorApplication>

 

And in my View, I’ve defined a stylename with bold and italic styles that apply at all DPI classifications. After that, I’ve defined overrides using CSS media queries. Notice that I only supplied a new fontSize value for 240 and 320. The first rule is applied at all DPIs. I’m able to omit a 160 DPI-specific rule because it gets it’s fontSize style from the first rule.

<s:View>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
/* applies to all DPIs */
.heading
{
  fontSize: 18;
  fontWeight: bold;
  fontStyle: italic;
}
@media (application-dpi: 240)
{
.heading
{
  fontSize: 28;
}
}
@media (application-dpi: 320)
{
.heading
{
  fontSize: 36;
}
}
</fx:Style>
...
<s:Label text="Heading Style, fontSize={fontSize}" styleName="heading"/>
</s:View>

 

The photo below shows my app running on all 3 devices. The Label with the “heading” stylename shows the correct DPI-specific fontSize on all 3 devices.

Share on Facebook

13 Responses to Comparing CSS Media Queries vs. Application Scaling

  1. Pingback: xhtml css templates – Comparing CSS Media Queries vs. Application Scaling « Jason's Flex … | XHTML CSS - Style sheet and html programming tutorial and guides

  2. Pingback: How to customize the CSS Media Queries in Flex 4.5 « AKABANA

  3. There is still a problem with the two first approaches:
    Try your application on a tablet like the acer a500 which has a dpi set to 160 but a hudge resolution (1280*800).
    The label will appear really small on such a device.

    So the question : what is Adobe advice or solution to be able to target every devices, including tablet, and keep a good render on both?

    Thanks for this article which clarify all this things!

    • The problem is the same for all of your mobile components (actionbar…) : Flex just take the dpi parameter to adjust the size of the components, but for tablet device in particular, resolution is also a important parameter. Both should be used to calculate the height / width…

    • Jason San Jose says:

      There isn’t an out-of-the-box way to automatically manage different UIs based on phone vs. tablet form factor. For example, tablets will typically use a split-view instead of paged views. Based on the 4.5 SDK, you’d have to check resolution and/or DPI at runtime and adjust your components and skins as appropriate. Keep in mind that you have the option of distributing a single binary for phone and tablet or 2 binaries targeting each separately. The Flex SDK doesn’t prescribe any particular best practice for this.

  4. Yes I understand that but:
    Flex provides components for “mobile” like actionBar. And these components doesn’t fit weel and every “mobile” devices…
    Even if I create 2 binaries (but I don’t want to, Android have a single store for instance), I will use the actionBar on both. Your suggestion is to rewrite / monkeypath it to target tablets properly?

    Regards,

  5. Pingback: Developer Week Sessions « Jason's Flex Blog

  6. Pingback: @renaun posts: Designing and Skinning Mobile Applications Link Roundup

  7. Corey Osman says:

    What happens when I use scaling and have multi dpi enabled skins?

    • Jason San Jose says:

      For example, if you set applicationDPI=”160″ as your target DPI, the multi-dpi enabled skin will use the 160 DPI skin always, regardless of the screen’s actual DPI.

  8. Thanks for this sample code and link to the presentation.

    Lawrence

  9. Pingback: Using CSS for Phone and Tablet UI « Jason's Flex Blog