CODEWITHSUNDEEP
cssmedia-queries
OliverJ90
OliverJ90

Reputation: 1321

Targeting device aspect ratio below a certain threshold in CSS

My brain is borked.

How can I target all devices with a device aspect ratio below 16/9. i.e fatter than 16/9? This doesn't seem to work.

This for portrait only within an iOS/Android cordova app. 

@media only screen and (max-device-aspect-ratio: 16/9) {
}

Upvotes: 1

Views: 783

Answers (2)

Lieutenant Dan
Lieutenant Dan

Reputation: 8284

Targeting all devices / resolutions; is very difficult in my opinion as they have different default mobile viewport settings and default mobile browser settings. Often times you have to treat each supported devices differently, and sometimes much differently when handling media, videos, animations, etc..

You should stick to supporting per device and resolution.

EG.

iPhone (Mobile Safari) Resolution X, Y, Z

iPad (Mobile Safari) Resolution X, Y, Z

Android (Chrome Webkit) Resolution X, Y, X

Blackberry (Opera) Resolution X, Y, X

You get the point...

Upvotes: 0

chrisgonzalez
chrisgonzalez

Reputation: 4213

Have you tried aspect ratio in general? If the device is wider than 16/9 in landscape, and you're in portrait, try:

@media ALL and (max-aspect-ratio: 9/16) { 
    /* style your super tall content here */
}

JS fiddle: http://jsfiddle.net/zo7xuj15/1/

The browser should occupy your device's screen either way, and here you won't have to worry about orientation. Note in the fiddle that the style within the media query activates only when you go super tall (skinnier than 9/16).

Upvotes: 1

Related Questions