Styling For Mobile Devices

101.Styling For Mobile Devices.

In our Previous articles we have told you about Styling for Printed pages. Styling for Mobile devices can be accomplished in much the same way as you can customize the style for printed pages.

The main difference between them is that instead of using a media type of “print”, you’ll use a media type of “handheld”.

User agents are those who (web browsers) decide which CSS media type to use based on what they are doing. Much like the “print” media type is used by browsers whenever they print a document, the “handheld” media type is used by many different small-screen browsers, when present.

One of the things you might do for small screens, is, for example, hiding the sidebars and other non-text elements. Or, if you use a fixed width page, you may want to eliminate that fixed width restriction, and perhaps make the blog entirely simple text format, allowing it to wrap properly on small screens.

It is also good to use percentage-based measurements rather than fixed pixel widths. For instant, in your CSS file give the tag body one text size and in text based tags or any tags that you use text in give them a percent to use and test it on a phone.

Large background images sometimes do not adjust well to small devices. You should exclude these from your handheld stylesheets and go for simple solid color backgrounds instead.

If you lack a small screen web device to use, there are emulators available that may view your site in this mode. The Opera Mini Emulator can view your site.

This sample code for a mobile style sheet will make the background white and the text black:

/* Mobile Style Sheet */

@media handheld {

    body {

        background: white;

        color: black;

    }

}

This should usually be inserted at the very end of your existing CSS stylesheet. A handheld device will pick this up and use the special stylesheet instead of your usual theme style.

Hope this article was helpful for you, guys!

Share this!

Post Author: Staff

Leave a Reply

Your email address will not be published. Required fields are marked *