Basic responsive design
When you design responsive web pages, you use CSS style sheets to respond to your users’ needs. You can also use JavaScript. This page lists some common solutions for optimizing your site content for different device screens.
Fluid grids
Instead of setting a fixed-pixel width for your content sections, use a percentage of the browser screen width. Your site content will respond and adjust accordingly to the window size of the browser. Some web developers use a fixed-grid layout in the desktop style sheet and a fluid-grid layout in the mobile style sheet. Below is an example of CSS styles for a fluid-grid layout.
Viewport
The viewport is the area that determines how content is laid out and where text wraps on the web page. It can be larger or smaller than the visible area. These are the mobile browser default viewport widths:
| Browsers | OS | Default viewport width (pixels) |
|---|---|---|
| Mobile Safari | iOS | 980 |
| Android browser | Android | 800 |
| Opera Mobile | iOS, Android | 850 |
| IE mobile browser | Windows Phone 7 | 320 |
For reference, the Configuring the Viewport section of the "Safari Web Content Guide" discusses how the viewport setting affects the content display in iOS devices. To set the viewport to the width of the device and allow user scaling, add this to your HTML file:
CSS media queries
CSS media queries enable specific style sheets to load for different media types and features. These include screen, print, handheld, device width, height, orientation, aspect-ratio, color, and resolution. To learn more about the pros and cons of media queries, read Ethan Marcotte's article Responsive Web Design and Jason Grigsby's article CSS Media Query for Mobile is Fool's Gold. Below is a list of the screen resolutions of popular mobile devices on campus.
| Mobile Devices | Type | OS | Screen resolution (pixels) |
|---|---|---|---|
| Apple iPhone 3GS | Smartphone | iOS 4.3.3 | 320 x 480 |
| Apple iPhone 4 | Smartphone | iOS 4.3.3 | 640 x 960 |
| Motorola Atrix 4G | Smartphone | Android 2.2.2 | 540 x 960 |
| Samsung Focus | Smartphone | Windows Phone 7 | 480 x 800 |
| Blackberry Bold | Smartphone | BlackBerry OS v5.0, upgradable to v6.0 | 480 x 360 |
| Apple iPad | Tablet | iOS 4.3.3 | 768 x 1024 |
| Samsung Galaxy Tablet | Tablet | Android 2.2 | 600 x 1024 |
To display a mobile style sheet for screen widths less than 640 pixels, add this to your HTML file:
For a list of all available media features, see W3C Recommendation for Media Queries.
JavaScript
You can also use JavaScript's User-Agent function for browser detection. To display a style sheet for an iPhone or iPod in portrait or landscape orientations, add this to your HTML file:
Internet Explorer conditional statements
Unfortunately the Internet Explorer browser in Windows Phone 7 does not properly observe CSS media queries. However, you can use IE conditional statements to display the mobile style sheet for the mobile IE browser.
Disable page zoom when switching from portrait to landscape mode in Mobile Safari
Use the initial scale viewport attribute.
Add web-kit browser specific style to your mobile CSS.
Hide Address Bar Automatically on Page Load
Add the following code to your HTML file:
window.pageYOffset < 1 is used to check if the user has already started scrolling and not jump to the top of the page if so.
