16:9 support #95

merged 3 commits into from Feb 17, 2012


None yet
4 participants

rtomayko commented Feb 17, 2012

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 <html> 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.


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.


Here's how I work:

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.


mtodd commented Feb 17, 2012

God this is sexy.

👍 🤘 👍


rtomayko commented Feb 17, 2012

@necolas Uggh you're right. I thought Firefox supported zoom for some reason. I added some -moz-* variants that accomplish roughly the same thing in aca4ca0. I might have to experiment with using transform:scale(<value>) everywhere since it seems to have more broad browser support.

@holman holman added a commit that referenced this pull request Feb 17, 2012

@holman holman Merge pull request #95 from rtomayko/next-tv
16:9 support

@holman holman merged commit bc28232 into play:next Feb 17, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment