HTML and CSS Reference
In-Depth Information
Table 13-1. The Most Common Tablet Resolutions and Their Aspect Ratios
Aspect Ratio
800 × 600
1024 × 576 or 1024 × 600
1.777 or 1.706666
1024 × 768
1280 × 800 or 1366 × 768
1.6 or 1.7786
1440 × 900
1600 × 900
1920 × 1080 or 1920 × 1200
1.777 or 1.6
2048 × 1536
2560 × 1440 or 2560 × 1600
1.777 or 1.6
Getting the Screen Dimensions
Because you're planning to adapt your gameplay mechanics based on screen size, getting the screen dimensions right
becomes essential in making your game work correctly. However, you'll soon discover that fetching the size of the
window is not identical across all platforms.
Resolutions on the Desktop
Getting screen dimensions on a desktop browser is fairly straightforward. Using window.innerHeight and window.
innerWidth will give you the pixel values of the browser window in which the game is located. Fortunately, every
modern browser will return the expected value:
var canvas = document.getElementById('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
Resolutions on Mobile
Mobile display is where fragmentation runs rampant. On a given mobile device, you can be deploying your HTML5
game either in a browser or as an embedded component (also called a webview component) inside a native
application (app). Unfortunately, in this environment, you can no longer simply query window.innerWidth , as too
many webviews and browsers return conflicting results. For example, some will return NaN (not a number) for
window.innerHeight , whereas others won't take orientation into account and will return the physical width. As such,
you have to add some additional logic to your code in order to allow for these edge cases. The code that follows sets up
the variables that you'd need to determine what the real width and height are of your screen:
// sample code for landscape games
//This code snippet is designed for both desktop and mobile use.
var width = window.innerWidth;
var height = window.innerHeight;
var screenRatio;
var realWidth;
var realHeight;
Search WWH ::

Custom Search