holman/play — pull request #95 by rtomayko (2012-02-17 11:56:02+00:00)
Title: 16:9 support

This is how I've been doing 16:9 stuff on the last couple of projects I've worked on. Here's the basic approach:

1. Use an `aspect-ratio:16/9` media query to bring in a special stylesheet.

2. Design with pixels (like a boss) at 1280x720 (720p). I like 720 because it fits comfortably on my MBP screen while still being largish. I can only fit about 85% of full 1080 dimensions.

3. Use js to detect when the viewport is a perfect 16:9, set the CSS zoom on the `` element to scale up or down to the viewport dimensions. This brings you up to full 1920x1080 or larger / smaller perfectly as long as everything is vector or high resolution raster.

### Styles

I didn't spend a lot of time on the actual styles at all. I figure people will line up to go crazy on that.

![](https://img.skitch.com/20120217-eqr75ct3br4btiu6yh93m25drm.png)

### Testing

Here's how I work:

![](https://img.skitch.com/20120217-e4bs48hwbhq8ckdaj9cexprwdp.png)

The viewport is 1280x720 so a pixel in `tv.css` is a pixel on my screen. I get there by entering this snippet directly into the js console:

$(window).resize(function() { console.log("" + $(window).width() + "x" + $(window).height()) })

And then resize until I get a perfect 1280x720. You'll know because the media query will kick in.