HTML and CSS Reference
In-Depth Information
// Get the height again, scrollTo may have changed the innerHeight
h = window.innerHeight;
if(w <= maxWidth) {
newDim = { width: Math.min(w,maxWidth),
height: Math.min(h,maxHeight) };
$("#game").css({position:'absolute', left:0, top:0 });
$("#container").css("width","auto");
} else {
newDim = { width: initialWidth,
height: initialHeight };
$("#game").css('position','relative');
$("#container").css('width', maxWidth);
}
$("#game").attr(newDim)
// Let the game know the page has resized.
// Game.resize(newDim);
};
var resizeEvent = touchDevice ? 'orientationchange' : 'resize';
$(window).on(resizeEvent,handleResize);
$(document).on("touchmove",function(event) {
event.preventDefault();
});
handleResize();
});
</script>
Leaving this code sitting bare on document ready isn't going to be a viable solution for long. The preceding
code will be incorporated into the mobile engine Quintus built in Chapter 9, “Bootstrapping the Quintus Engine:
Part I.”
Configuring Your App for the iOS Home
Screen
You need to add a few more pieces to your game to let people save it to their home screen. The first is to add a
meta tag indicating your game is “web-app-capable.” Users can save your game to the home screen regardless
of whether your app marks itself as web-app-capable, but if you explicitly mark it as such, your app automatic-
ally loads in full-screen mode without the address bar or the button bar at the bottom of the page.
Making Your Game Web App Capable
To make your game web-app-capable, you need to add the following meta tag to the
<head>
of your document:
<meta name="apple-mobile-web-app-capable" content="yes">
