Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

device-aspect-ratio (media query) not working for Droid 2

I have some content that needs varying styles ultimately based on aspect ratio (basically it's targeted at one platform but as a "would-be-nice" I want to make the content at least appear correct on other platforms). I'm finding that the Droid 2 (Android 2.2 stock) is not responding to any of these queries:

only all and (device-aspect-ratio: 854/480)
only all and (device-aspect-ratio: 480/854)
only all and (aspect-ratio: 854/480)
only all and (aspect-ratio: 480/854)

Does the phone or the OS not support the aspect-ratio query? Is the Droid 2 full of sad? The aspect ratio tests work perfectly for iPhone 3GS/4/4S and iPad so far for me. Alternatively, what would someone suggest for handling Droid 2 / Nexus resolutions after my iOS aspect ratio tests if they don't actually support device aspect ratio.

I'm trying to shy away from using max-width because some Android devices in landscape are wider than an iPad in portrait and I was getting collisions where a device would incorrectly identify as an iPad based on a set width. Any insight would be appreciated.

like image 205
Aaron Avatar asked Nov 01 '11 20:11

Aaron


People also ask

What is aspect ratio in media?

The aspect-ratio feature is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport. It is a range feature, meaning you can also use the prefixed min-aspect-ratio and max-aspect-ratio variants to query minimum and maximum values, respectively.

Which CSS media feature can be used to test the width-to-height aspect ratio of an output device?

The device-aspect-ratio CSS media feature can be used to test the width-to-height aspect ratio of an output device.

What is the aspect ratio of Android?

16:9 standard aspect ratio.


Video Answer


1 Answers

I had the same problem same times ago. I solved it by dynamic css resolution based on js/php width resolution. In few words, taken width resolution, the script resized all the element by the % based on original size->target size. For IE same problem solved by ms filter. Worked by all device becasue stylesheet was dynamically calculated.

like image 162
Ade Avatar answered Sep 27 '22 18:09

Ade