[FLEX-33994] Need a way to distinguish phone and tablet target devices through css

• Type: New Feature
• Status: Resolved
• Priority: Major
• Resolution: Implemented
• Affects Version/s: Apache Flex 4.11.0
• Fix Version/s: Apache Flex 4.12.1
• Component/s: .Unspecified - Mobile
• Assignee: Maurice Amsellem
• Reporter: Maurice Amsellem
• Created: 15/Dec/13 13:10
• Updated: 01/May/14 21:35
• Resolved: 22/Mar/14 21:47

Description

Some components should have different layout on phone and tablet devices.
For example, DropDownList should display as a centered popup list on phones, and display the drop down list below its popup button on tablets, supposedly having move screen space

Implementation notes:
the following @media selectors have been implemented:

device-width : standard, current device width, depending on the orientation
device-height : standard, current device height, depending on the orientation
-flex-device-diagonal : non-standard, current device diagonal

All three selectors can be expressed with units.
The following units are valid: (no unit), px, pt, in, cm, dp
no unit => physical pixels
px => physical pixel
pt => pixels-equivalent at 72 ppi
dp => pixels-equivalent at 160 ppi.
Note that pt, in and cm are based on "raw" device dpi, whereas dp is based in normalized "applicationDPI".

For optimization reasons, -flex-device-diagonal is guaranteed to never change so that styles do not needed to be recomputed. This is mainly useful on mobile devices.

Examples of valid media queries:

/* phones */
@media (-flex-max-device-diagonal: 5in) {
global

{ fontSize: 24; }

}

/* tablets */
@media (-flex-min-device-diagonal: 5in) AND (-flex-max-device-diagonal: 11in)
{
global

{ fontSize: 16; }

}

Note: deviceWidth, deviceHeigth and flexDeviceDiagonal are accessible in actionScript with eg.
MediaQueryParser.instance.flexDeviceDiagonal
This returns an object of type: mx.styles.CSSDimension (see Apache documentation for reference)