ISO Elegant Responsive Solution to Crazy Aspect Ratios

[SpringMountain]

I am using media queries to build a responsive site. Just as I think I’ve got it all set for all devices, my friend shows up with this Samsung laptop with an aspect ratio that is different than the laptops I was testing on. It’s widescreen at 16:9 (1600 x 900 pixels). More like a television than a computer monitor.

I really don’t want to create individual queries for each device out there. This has me looking at device-aspect-ratio, and how to use it, elegantly. A search for device-aspect-ratio information doesn’t return a contemporary tutorial on using it with responsive designs.

Thought I’d see if anyone here has an idea or proven method for this. I’m thinking of determining what are common aspect ratios and what are uncommon aspect ratios, and delivering a select few queries to handle screens of this nature.

Here is a link : http://springmountainconsulting.com/AD_2012/small-scale-sculpture.html

Another issue is testing. I don’t have the device on hand, and I don’t know how to force my browser or CSS software to show a specific aspect ratio. Online tools, like hyperspatial’s deivice testing tool, don’t seem to reflect changes I make, so how I go about testing the results is another part of the question.

Thanks in advance!

Jay

[SpringMountain]

http://albertdicruttalo.com

Is anyone here using device-aspect-ratio in their responsive designs (in addition to max/min device-width) to handle widescreen displays?

I was attempting to write a media query that limits the height of an image if the aspect ratio is equal to or greater than 16:9.

I had tried :

/* Narrow Laptop Screens */

@media screen and (min-width : 1600) and (max-height : 900px) {

.rg-image img {

max-height: 600px;

}

}

But this affects more than just this aspect ratio, needless to say my 1280 x 800 laptop was not pleased with this command.

I was trying to avoid using a specific aspect ratio, in an effort to make any new media query as flexible as possible, allowing for varying aspect ratios of the same nature, but this does the trick :

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

.rg-image img {

max-height: 600px;

}

What are the other common aspect ratios out there that are different enough to the point they need addressing? Up to this point I’ve used 992px for apple’s laptops, which are the most narrow aspect ratio I’ve considered (until I saw that Samsung).

My 13″ MBP is 1280 x 800 = 16:10 (8:5) and I cover this layout with the 992px default media query that is the current standard for laptops AFAIK.

Based on this chart, there are 3 major aspect ratios skinnier than the laptop’s 16:10. Can’t I just add them to the 16:9 media query and be done with it?

@media only screen and (device-aspect-ratio : 5/3) and (device-aspect-ratio : 16/9) and (device-aspect-ratio : 17/9) {

.rg-image img {

max-height: 600px;

}

Or if you want to keep it simple, and if you can afford the real estate, how short does one need to make their designs to allow for 16:9 screens?

What I realized was, that’s also 720p and 1080p standards, so if people are viewing your work on a TV, you kind of want to take advantage of that as best you ca, (realizing this also solves my issue of where I can test 16:9!).

10 minutes later my site is pretty dialed in on the big screen, with its very own media query. I don’t feel too bad adding this to the arsenal b/c I want to take care of those who want to see my client’s work on the big screen. Now if only my Boxee browser would load the image fast enough on the home page so it’s in focus for more than a blink of an eye.

[Author]

Posts