Inspiring

Question

@Media selector in CSS: how to tell iPhone 3Gs from iPad

Forum|Forum|14 years ago
March 8, 2012
1 reply
1371 views

Hi all,

I have a question concerning the capabilities of the @media selector.

From what I read in the documentation, @media, in AIR, supports these parameters

- os-platform (IOS, AND, MAC, WIN)

- application-dpi (160 = less than 200; 240=less then 280: 320: more than 280)

how does one tell if the device is iPhone 3gs or iPad?

both are IOS, both have application-dpi less than 200 (163 for iPhone 3, 132 for iPad)

it would be useful to use max-device-width, but I guess it's not supported? it's not working for me...

thanx!

This topic has been closed for replies.

A

Anonymous

Capabilities.screenDPI is your answer I believe.

I recently used this to scale a menu in an app I am working on and it seems about 90% accurate, I set the menu to max height 2.5" and if stage.stageHeight<= Capabilities.screenDPI * 2.5 then I made the movie clip the size of the stageHeight. It works out nicely even without manually scaling the stage.

You can obviously use it to determine the physical screen size of the incoming device and then act accordingly.

R

Riccardo_MoschettiAuthor

Inspiring

Thanks for the heads-up, Mark.

However, you're suggesting to use Action Script (Capabilities is an Action Script class).

The @media selector is used in the CSS. The CSS is a simpler option than Action Script: if you define a style for a tag in the main css, then you don't have to repeat it in every screen / view of your application.

Here is an example of what it can do

https://developer.mozilla.org/en/CSS/Media_queries

Apparently AIR only supports Operating System and DPI.

Z

Zhenya1919

Known Participant

I've just fell on my face with the same problem. Apparently, there is no way to have different styles for iPhone 3GS and iPad inside the same application. @media selector does not let you do that. It wouldn't be a big problem if we could use theme swf files the same way we use them in Flash. But we can't do that either because loading executable code (which the theme swf is) won't work on iOS due to security restrictions. Please correct me if I wrong but it means that you can't have one application binary with different styles for iPhone 3GS and iPad.

What makes it worse, it is not that easy to reorganize your project to build two applications: one for iPhone 3GS, another for iPad using the same application project and different build scripts (ant). It would be possible if we could link a theme compiled as SWC library. But it doesn't seem to work if you have references to skin classes and images in your css. At least after multiple trials I couldn't make it work.

The only solution that comes to mind is to have two application projects: one for iPhone 3GS, another one for iPad. And keep everything else in libraries. I wish I could see its coming earlier so I would organize my project that way from the beginning.

It seems like a major flaw in design of the media selector. And not just because you can't support both iPhone 3GS and iPad in one application. For the same reasons you can't have different styles for iPhone 4/4S and new high resolution iPad (both have 320 dpi screens). It would be pretty easy to fix by just adding an additional tag to the media selector.

I wish I was wrong and there is a solution for this problem already. Please share your experience if you had the same issue.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded