HTML and CSS Reference
In-Depth Information
Table 13-1. The Most Common Tablet Resolutions and Their Aspect Ratios
Name
Resolution
Aspect Ratio
WVGA
800 × 600
1.333
WSVGA
1024 × 576 or 1024 × 600
1.777 or 1.706666
XGA
1024 × 768
1.333
WXGA
1280 × 800 or 1366 × 768
1.6 or 1.7786
WXGA+
1440 × 900
1.6W
SXGA+
1600 × 900
1.777
WUXGA
1920 × 1080 or 1920 × 1200
1.777 or 1.6
QXGA
2048 × 1536
1.333
WQHD
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