HTML and CSS Reference
In-Depth Information
If not,
set canvas to match the size of the window.
Finally, set the canvas to absolute position
in the top left of the window
Moving on to the actual code, add the method from
Listing 3-3
to the bottom of the definition of the
Game
object in
engine.js
before the return statement:
Listing 3-3:
setupMobile
this.setupMobile = function() {
var container = document.getElementById("container"),
hasTouch = !!('ontouchstart' in window),
w = window.innerWidth, h = window.innerHeight;
if(hasTouch) { mobile = true; }
if(screen.width >= 1280 || !hasTouch) { return false; }
if(w > h) {
alert("Please rotate the device and then click OK");
w = window.innerWidth; h = window.innerHeight;
}
container.style.height = h*2 + "px";
window.scrollTo(0,1);
h = window.innerHeight + 2;
container.style.height = h + "px";
container.style.width = w + "px";
container.style.padding = 0;
if(h >= this.canvas.height * 1.75 ||
swx >= this.canvas.height * 1.75) {
this.canvasMultiplier = 2;
this.canvas.width = w / 2;
this.canvas.height = h / 2;
this.canvas.style.width = w + "px";
this.canvas.style.height = h + "px";
} else {
this.canvas.width = w;
this.canvas.height = h;
}
this.canvas.style.position='absolute';
this.canvas.style.left="0px";
this.canvas.style.top="0px";
};
