flex-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Maurice Amsellem (JIRA)" <j...@apache.org>
Subject [jira] [Updated] (FLEX-33994) Need a way to distinguish phone and tablet target devices through css
Date Sat, 22 Mar 2014 21:57:43 GMT

     [ https://issues.apache.org/jira/browse/FLEX-33994?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]

Maurice Amsellem updated FLEX-33994:
------------------------------------

    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;  }
}



  was:
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:





> Need a way to distinguish phone and tablet target devices through css
> ---------------------------------------------------------------------
>
>                 Key: FLEX-33994
>                 URL: https://issues.apache.org/jira/browse/FLEX-33994
>             Project: Apache Flex
>          Issue Type: New Feature
>          Components: .Unspecified - Mobile
>    Affects Versions: Apache Flex 4.11.0
>            Reporter: Maurice Amsellem
>            Assignee: Maurice Amsellem
>             Fix For: Apache Flex 4.13.0
>
>
> 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;  }
> }



--
This message was sent by Atlassian JIRA
(v6.2#6252)

Mime
View raw message