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;
}
else
{
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(isNaN(screenRatio))
{
if(screen.width > screen.height)
{
realWidth = screen.width;
realHeight = screen.height;
}
else
{
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.
