HTML and CSS Reference
In-Depth Information
Initially, you're just setting some global variables. The width and the height are set to the size of the browser
window/device screen. Even though width is set to window.innerWidth , more verification is needed to ensure that the
value is correct, for example, checking if you're on a rotated screen. In a game that renders in landscape view, you'd
expect the width always to be greater than the height. Thus, checking to see if width is greater than height is a way to
confirm that these values are indeed correct:
if(width > height)
realWidth = width;
realHeight = height;
realWidth = height;
realHeight = width;
screenRatio = (realHeight / realWidth);
Although this seems a simplistic function, you'd be amazed at how complex the results are across devices. As a
test, print out your height, width, and screenRatio from your mobile devices. realWidth and realHeight should be
the correct values, even if the wrong dimensions were returned by the window.innerHeight and window.innerWidth
calls. You also now have the screenRatio . But wait! There's another issue that must be resolved: some webviews
return NaN for window.innerHeight and window.innerWidth . To check if this has happened, screenRatio can be
evaluated to see if it's NaN :
if(screen.width > screen.height)
realWidth = screen.width;
realHeight = screen.height;
realWidth = screen.height;
realHeight = screen.width;
screenRatio = (realHeight / realWidth);
Because the only time NaN may be returned for window.innerWidth and window.innerHeight is on an Android
device, screen.width and screen.height are an acceptable replacement. Trying to use these calls on a desktop is
not recommended, as the browser window can be any size, not just the size of the device screen. screen.width and
screen.height have the same problem of sometimes returning incorrect values. Checking to see which has a higher
value is still required to determine if the values are correct.
Responsive Canvas
One of the first decisions you'll need to make about your responsive design is what to do, at a high level, with the
canvas itself across multiple resolutions and aspect ratios.
Search WWH ::

Custom Search