website design for different devices?

What should i do so that my website fits properly for different screens.. for example 32" 24" 17" monitors as well as for mobile device(netbooks etc.) with 9" - 11" screens and mobile phones that have anywhere between 2.5" - 5" screen?

How should i design the layout of my homepage/template etc. What should i keep in mind... what would i require for this css, javascript or server languages to read the type of device?

Any oth开发者_Python百科er recommendations you'd like to suggest to make the site accessible and usable for various types of devices.

Thanks in advance for all your help.

there no need to write js you can did it simply with CSS. In meta we define that the website adjust according the viewport of the device & also if you want to change in design then write different css for the things which you want to change for example:

for mobile device

<meta name="viewport" content = "user-scalable=no, width=device-width" />'
<link rel="stylesheet" media="all" href="stylesheet/iphone.css" type="text/css" />;

for window resize

 <link rel="stylesheet" media="all (min-width=960px)" href="stylesheet/iphone.css"
 type="text/css" />;

<link rel="stylesheet" media="all (max-width=960px)" href="stylesheet/iphone.css"
 type="text/css" />;

For more information must saw these link's http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes , http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Nothing personal sandeep, but most of the answers to mobile web design questions here are only targeting iPhone or Android. Mobile internet is not just iPhone or Android. There are many devices (in fact more than iPhone and Android put together) that doesn't understand view-port or media queries and active on the mobile internet

If you want to be accessible as many devices as possible.

• design light weight pages
• do not use horizontal layouts. such as 2-3 boxes next to each other. make everything vertical so they would fit on small screens
• do not use heavy java-script, avoid it as much as possible
• do not use too many graphics
• avoid using min-width and/or max-witdh in your css