flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Maurice Amsellem <maurice.amsel...@systar.com>
Subject Advice needed on FLEX-33994
Date Wed, 19 Mar 2014 14:32:37 GMT

I am preparing for https://issues.apache.org/jira/browse/FLEX-33994  ( media size CSS ) and
have a few interrogations:

1) Specs: this is how I intend to implement the new media selectors:

@media selectors:
device-width, device-height

Supports the following units:
(no unit), px, pt, in, cm, dp 
- no unit / px => physical pixels
- pt => pixels-equivalent at 72 ppi 
- cm & in => self explanatory
- dp => pixels-equivalent at 160 ppi (bucket ppi)

If I understand correctly the explanations from Justin, "dp" uses the bucket DPIs, not the
real ppis.
So I will use the real device ppi to compute pt, inch and cm pixel equivalent and bucket-ppi
to compute the pixel equivalent for "dp" unit.

2) Supporting resize / orientation change:
Ideally, when resizing the SWF (on desktop) or changing the device orientation / going full
screen on mobile, the media queries should be re-evaluated, like in HTML, with potentially
different results.

I am not an expert of the Style Management in Flex, but I am worried that this would be very
slow , especially on mobile, and may even break the application. 

Since the initial need was to be able to distinguish mobile / tablet / screen / tv, and there
are other means of handling orientation change in the  UI ,
I thought it could be acceptable to compute width / height independently of the actual device
orientation (eg. always in portrait mode).

Another possibility , which is not W3C, is to provide new "device-diagonal" measure, which
is a common measurement for display sizes
@media (max-device-diagonal: 5in) {
  /* phone css*/
@media (min-device-diagonal: 5in) and (max-device-diagonal: 11in) {
  /* tablet css*/
@media (min-device-diagonal: 11in) and (max-device-diagonal: 24in) {
  /* screen*/
@media (min-device-diagonal: 24in) {
  /* TV*/
What do you think?



View raw message