DGM2740 Principles of Web Languages

This course was built by Dr. Paul Cheney for the Digital Media Department at UVU

Unit02 Media Queries

Objectives

Overview

Have you ever had the unfortunate experience of opening a web page on your phone that does not have any media queries 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.

The solution 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.

Device Reported 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

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.

Internet Explorer, Get a Life!

To use HTML5 or CSS3, you have to add some jQuery libraries to your source code. In this example we include 4 lines of code that makes our media queries work on IE7, IE8 and IE9.

Stop the font from enlarging

By default, the font size changes on iPhones when rotating from portrait to landscape and back again. This line of CSS prevents the resizing.

html {-webkit-text-size-adjust: none; }

Here is a screenshot showing both orientations.

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

Learning Activities

All videos listed below are available on Udemy

Assignments

Reflection Questions

Answer the following Questions based on reading the orange book and submit them to Canvas.

Example

No examples for this unit