To Zoom or to Scale

You’ve made your website for Google TV, it’s looking damn fine, but you’ve hard coded a width, eek, how do I handle 720p & 1080p . . . . I know I’ll zoom the hell out of it.

This is a fairly common use case, generally I would strongly encourage developers to create websites which are responsive and handle different screen sizes accordingly, but the history of web development has shown that fixed width pages are fairly common, especially moving from designs to HTML + CSS.

The recommendation from the Google TV team has been to apply a CSS zoom property to enlarge your UI, however some developers found minor artefacts and sprite issues would appear as a result.

One alternative to this approach is to use -webkit-transform: scale(1.x) which scales the UI and seems to do a better job at avoiding artefacts.

var scaleElementWidth = $('body').width();
var scaleElementHeight = $('body').height();

var windowWidth = $(window).width();
var windowHeight = $(window).height();

var wRatio = windowWidth/scaleElementWidth;
var hRatio = windowHeight/scaleElementHeight;
var ratio = Math.min(wRatio, hRatio);

$('body').css('-webkit-transform', 'scale('+ratio+')');

Big shout out to +Paul Lewis for this idea

Orig Photo: https://flic.kr/p/w9Kk