RESIZE&YOURW EBSITE FORM OBILEW EB&BROWSERS O

[Pages:2]RESIZE YOUR WEBSITE FOR MOBILE WEB BROWSERS

One lesser-known feature of CSS is its capability to alter your site's layout based on display size. This means that when your site is viewed on a mobile browser, an optimized layout for the screen real estate can appear.

Nothing is more annoying than going to a website on your favorite mobile device only to find a desktop-sized layout compressed into a tiny screen, or a layout so oversimplified and stripped down that the most useful features are crippled or absent.

There are a few different ways to apply this technique to your website. CSS allows for a media attribute to target a style sheet by hardware. For example, you can instruct the browser to apply base.css for all media and superimpose mobile.css for handheld devices:

Unfortunately, some mobile web browsers actually ignore the handheld property, such as iPhone and Android browsers. Instead, the most reliable way to implement this feature is to forgo the media='handheld' method and instead focus on absolute screen width values:

This loads mobile.css on screens 320 pixels or smaller. You can resize your web browser below the max-width threshold to experience the mobile layout on the desktop.

For iPhone and iPad users, you should also specify a viewport meta tag. This sets a default zoom level and specifies whether the user is allowed to zoom in or out.

Resize Your Website for Mobile Web Browsers

1 Scroll to the tag group.

2 Type media='all' for the default CSS.

1

3 Type .

7

5 Save the HTML file.

6 Create a new file for the mobile CSS 7

layout.

7

7 Insert comments describing the

change for the smaller layout.

7

8 Insert the new CSS code to override

the default-layout CSS code.

9 Save the CSS file as mobile.css.

2

4

8 8

8 8

8

46

0 Open your web page in a normal

browser.

The page appears normally; the mobile.css style sheet is not applied.

Note: The browser window width is above the max-width threshold set in step 3.

! Narrow the browser window to

below the max-width value.

A The mobile.css layout is applied to the desktop browser.

@ Open your web page on a mobile

phone.

B The mobile layout is applied on the phone.

Note: Most mobile phones have a maximum width of 320 pixels. Use this value as the absolute minimum value for the maximum-width detection in step 3.

2CHAPTER

Getting Started with HTML5 Page Layout 10

A B

EXTRA

When choosing a max-width value, experiment with your default site layout and slowly reduce the browser window width. As soon as the CSS layout starts to break, measure the width and use it as your threshold. You can use the broken CSS layout to identify what needs to be optimized for the smaller layout.

If you wanted to create an iPad-specific version of your website, you can create a CSS layout that specifies a min-width and max-width value range.

Example

Finally, if you are familiar with browser detection, you may be tempted to use the browser's user-agent string and categorize the device into a list of known layouts. This method is flawed because new devices are constantly coming out, and many devices misrepresent themselves. For example, the Motorola Xoom is a 10-inch tablet running Android 3.x, and its user agent identifies itself as an Android device; if your site assumes all Android devices have smartphone-sized displays, Xoom users will be left with a poorly formatted version of your website.

47

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download