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.
|1st generation iPod in Portrait mode||320|
|1st generation iPod in Landscape mode||480|
|iPhone 4 in Portrait mode||640|
|iPhone 4 in Landscape mode||960|
|1st generation iPad in Portrait mode||768|
|1st generation iPad in Landscape mode||1024|
|Motorola Milestone Phone in Portrait mode||480|
|Motorola Milestone Phone in Landscape mode||854|
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.
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 part 1 of this tutorial I show how to use the Dreamweaver "Multiscreen Preview" to create three external css queries.
In part 2 of this tutorial I demonstrate how the viewport statement works.
In part 3 of this tutorial I show a solution to making media queries work in Internet Explorer 7 and 8.
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.
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.