Unit02-Using Media Queries

What you will learn

Have you ever had the unfortunate experience of opening a web page on your phone and having the page shrink so you can see the entire page. In order to read the tiny print, you then have to enlarge the page and commit the unpardonable sin of scrolling sideways to read the words.

What we really need is a single website that can detect the viewers screen and then adapt the content to fit. There are two approaches supported by most modern browsers that allow designers to adapt a site to fit the users device.

Device Width Approach

One approach is to use min-device-width and max-device-width. An iPhone has a device width of 320px regardless of whether it is in portrait or landscape mode. An iPad had a device width of 768px regardless of whether it is in portrait or landscape mode.

Using Device width, we can target phones OR tablets but provides limited support for landscape and portrait mode. This approach prevents your web page layout from changing based on the computer browser width.

Full list of Devices

Browser Width Approach

Another approach is to use the width of the browser window. A typical way to design sites using this approach is to use three style sheets. The first design is for the phone in portrait. The second for the phone in landscape AND the tablet in portrait. The third is for the tablet in landscape and the desktop. Another feature/problem is that it also resizes the page on a computer. Here is an example of this approach which is used by Adobe Dreamweaver but does not work in old IE. Of course IE always causes problems and here is a solution using jquery.

Browsers Lie. Stop the Lying!

To use the width approach, you have to prevent the browser from lying about their width. To accomplish this, you must set the viewport. On a computer the viewport is the width of the browser window which in many cases is less than the screen size. In the mobile world the viewport related to the screen size of the device. For a full explanation see this article in quirksmode.

A complex approach

In his article "Return of the Mobile Stylesheet" Dominque describes the problem of designing for mobile devices. He shows an early example of setting media="handheld" in the stylesheet link and the problems encountered using this approach. He then goes on to propose a complex set of stylesheets using a screen.css + antiscreen.css + handheld.css. I will not follow this approach as it gives me a headache trying to figure it out.

My Approach

In this tutorial, I will demonstrate a media query approach used by Greg Rewis at Adobe Max 2011 and implemented in Dreamweaver 5.5. It works great on portable devices and computer browsers except for one browser which is detested by most web designers. Actually this approach does work on IE 9 and 10 but there is still a bunch of IE 7 and 8 browsers that haven't been updated.

In order to have this approach work on all browsers, we have to modify the approach a little and add a few extra lines of code to support old IE.

In the second part of this tutorial I will show you Eric Myers Reset and how you can test your work in IE using Adobe Browser Labs.

Tutorials

In part 1 of this tutorial I show how to use the Dreamweaver "Multiscreen Preview" to create three external css queries.

2740_02a_queries

In part 2 of this tutorial I demonstrate how the viewport statement works.

2740_02b_viewport

In part 3 of this tutorial I show a solution to making media queries work in Internet Explorer 7 and 8.

2740_02c_ieFix

In part 4 of this tutorial I demonstrate how to add an additional style sheet that effects all versions of the site. For this example I use the Eric Myers reset CSS file.

2740_02d_resetCSS

In part 5 of this tutorial I show a solution to prevent a phone from scaling the font when the phone is rotated to landscape mode.

2740_02e_phoneFontAdjust

Paul