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.
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.
The device-aspect-ratio CSS media feature can be used to test the width-to-height aspect ratio of an output device.
16:9 standard aspect ratio.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With