Css for mobile phones

Want to make you website mobile phone friendly?

First you are going to need some meta tags in the heading so phones KNOW that they are looking at a mobile site and display in the right way.

<meta name=”viewport” content=”width=device-width, user-scalable=yes”>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

 

Then you are going to need some media quires. This works well

@media handheld, screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {
/* Phone CSS here */

}

Then somthing to resize images

/* Flexible Images for Adjusting Screen Resolution */
img {
width:100%;
}

and then a few fixs

/* iphone text fix */

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

 

Mobile-friendly: The mobile web optimization guide

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

http://webdesignledger.com/tools/7-useful-tools-for-mobile-website-testing

Media types

http://www.howtocreate.co.uk/tutorials/css/mediatypes

Opera Mini Simulator

http://www.opera.com/mobile/demo/

http://dev.opera.com/articles/view/opera-mini-5-beta-developers/

Taming Opera Mini 4

http://blog.wapreview.com/397/

Advertisements