Game Development Reference
In-Depth Information
the format is not appropriate. Instead of checking for 1/0.5, the proper way would be
to make it 2/1, making the width length twice as large as the height.
When specifying a desired value for a media query aspect-ratio expression, the num-
ber on the left refers to the width relative to the height, which is represented by the
value on the right. Both numbers must be positive integers and the larger of the two
values can be on either side. Alternatively, both values can be the same, which would
test for a square aspect ratio (1/1).
device-aspect-ratio
Checking for device-aspect-ratio works the exact same way as the aspect-ratio, as
explained previously, with the only difference being that the
width
and
height
ref-
erences are based on the device-width and device-height, as explained in their re-
spective sections.
Again, as with device-width and device-height, this is a great way to check for the un-
derlying fingerprinting of the device accessing the application, which is independent
of the current state of the browser window at the time the media query is tested. As
far as responding to user actions, testing for aspect-ratio might be a better solution
than device-aspect-ratio as the user might change the dimensions of the browser
window independently of the device-screen-ratio. However, in order to determine the
device's true aspect ratio, the alternative would be to use device-aspect-ratio.
