Mailing-List: contact issues-help@flex.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@flex.apache.org
Date: Sat, 22 Mar 2014 22:07:43 +0000 (UTC)
From: "Maurice Amsellem (JIRA)" <jira@apache.org>
To: issues@flex.apache.org
Message-ID: <JIRA.12684811.1387113015467.125988.1395526063154@arcas>
In-Reply-To: <JIRA.12684811.1387113015467@arcas>
References: <JIRA.12684811.1387113015467@arcas>
Subject: [jira] [Updated] (FLEX-33994) Need a way to distinguish phone and
 tablet target devices through css
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit


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

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)


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


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


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