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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- how to resize an image north east open studios neos
- picresize web ambassadors network
- how to resize photos and save for web using express
- website maintenance training oklahoma
- logging into the avatar sandbox 1 resize your web browser
- resizing your photos national trust
- note this is a sample link your link will replace the xs
- resize yourw ebsite form obilew eb browsers o
- how to resize your digital images with pixlr editor
- stop resizing your browser window already
Related searches
- browsers not working windows 10
- browsers won t open windows 10
- browsers not responding windows 10
- all internet browsers keep crashing
- conservative browsers for windows
- free browsers for windows xp
- all web browsers not responding
- all web browsers not working
- browsers not opening
- windows 10 browsers not working
- browsers not working properly
- web browsers not working properly