scaling elements to make them fit the screen (by @fmate14)

This commit is contained in:
Bartek Szopka
2012-03-06 21:43:38 +01:00
parent 45fcf19c4d
commit 456817d3b5

View File

@@ -141,6 +141,19 @@
document.head.appendChild(meta); document.head.appendChild(meta);
} }
// configuration object
// probably will get extended (and configurable) later
var config = {
width: 1024,
height: 768
}
// computing scale of the window
var hScale = window.innerHeight / config.height;
var wScale = window.innerWidth / config.width;
var windowScale = hScale > wScale ? wScale : hScale;
var canvas = document.createElement("div"); var canvas = document.createElement("div");
canvas.className = "canvas"; canvas.className = "canvas";
@@ -285,8 +298,8 @@
css(root, { css(root, {
// to keep the perspective look similar for different scales // to keep the perspective look similar for different scales
// we need to 'scale' the perspective, too // we need to 'scale' the perspective, too
perspective: step.scale * 1000 + "px", perspective: step.scale * (1/windowScale) * 1000 + "px",
transform: scale(target.scale), transform: scale(target.scale * windowScale),
transitionDuration: duration, transitionDuration: duration,
transitionDelay: (zoomin ? "500ms" : "0ms") transitionDelay: (zoomin ? "500ms" : "0ms")
}); });