Chapter 6.10: Media Queries

Sometimes your desired layout will only work on certain devices. Even so, you may want to be able to use your desired layout when possible and switch to a different layout if your desired layout will simply not work. To solve this problem, CSS supports media queries. Media queries are used to check certain conditions about the device the page is currently being rendered on. By setting up rules based on these conditions, you can alter the html elements based on the device that is rendering the page. This lets you set up different layouts based on the device being use.

If you have looked at any tutorials on CSS, you will likely see the claim that you need the following header in your program in order to use media queries.

What they fail to tell you is why. As someone who hates “magic lines of code” I had to look into why this would be the case. This statement is needed if you want media queries to work on non-desktop machines. This is due to the tablet wanting to support web pages by scaling the size of the pages so they will fit on the tablet. The problem with doing this is that the browser will no longer have correct information for media queries. The width=device-width is telling the tablet that when reporting information to the browser to use the real device width and not the scaled version. The initial-scale=1.0 ensures that when the page is first displayed, it is not scaled. Sadly, this magic trick does not work on all devices, as some devices with really small resolutions may still set the viewport as being larger than what it is but such devices are slowly fading away.

The format for a typical media query is the following:

The type is an optional parameter and is for determining what type of device the query applies to. By default, the query applies to all devices. At the time of writing this, the options consist of all, screen, and print. There were additional types such as tv, projection, and handheld. These have been depreciated but can still be used for backwards compatibility.

Condition is simply a boolean expression that checks a media feature. There are several media features, with a good source of information being https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features. Most of the options are not useful for game development, so the only options I will look at are pointer, width, height, hover, and orientation.

Pointer lets you know if there is a pointing device and if so whether it is coarse or fine. This is important as the size of your buttons may need to be bigger if the accuracy of the pointing device is coarse. An example of it’s use would be:

Width and height are the devices width and height. This is useful for determining how big things such as tiles should be. You can create several sizes of images and use the appropriate sized image based on the size of the screen. This does require some extra conditions. CSS lets you prefix min and max to these so if you wanted to know if a 600x600 box would work on your display you would do something like:

Notice that in this case the media query is in the middle of a tag definition.

Often you would want to find the size to help determine the type of screen the user is using. The typical min-width used with conditions for older phones 480px, older tablets 768, old laptops 1024, laptops 1280, HD 1920, 4k 3840. These numbers, of course, are assuming landscape orientation. This checks for either landscape or portrait.

And finally, we may want to know if the device has hover capabilities. In other words, can the device detect where the pointing device is located. Most touch screens, for example, will not detect hovering as users need to touch the screen for events to be detected. A mouse, on the other hand, has a pointer on the screen that can be moved so it is easy to determine if the mouse pointer is over a certain location. Knowing this may alter how links work as with non-hover devices there is no hover state for the link so the normal and clicked states need to be more distinct.

Of course, this leads to the question on how to test this. The obvious answer is to test on several devices. While a good idea, this isn’t always practical during development so many browsers come with a developer mode that has something like chrome’s device tool bar. This lets you select various devices to emulate the display so you can see how your page works on different devices.

Now we have covered laying out pages, you should be ready for a project, which is next.