READ FIRST!
http://www.quirksmode.org/mobile/viewports.html

additional suggested material......... 

• Luke Wroblewski : Mobile First, published by: A Book Apart 
• Ethan Marcotte: Responsive Web Design, published by A Book Apart

W3C Candidate Recommendation 27 July 2010
@Media Queries (http://www.w3.org/TR/css3-mediaqueries) are going to be the ultimate tool in the web designers toolbox for many years to come. That is why we should brush up on the devices we will be targeting in this age of mobile freedom.

Basically, this means you can change stylesheets based on for instance the width and height of the viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.” -CSS3.info

 The complete list of media types in HTML4 is:

• aural
• braille
• handheld
• print
• projection
• screen
• tty
• tv

CSS2 defines the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’. Also, ‘all’ is used to indicate that the style sheet applies to all media types.

Even though we use the term "mobile", let's not confuse this term with the idea of "small screens." Mobile means something entirely different and more complex, but first let us look at the devices we will be targeting in our queries.

• width: width of display includes min-width and max-width
• height: height of display. includes min-height and max-height
• device-width: width of rendering surface, such as the screen or paper
• device-height: height of rendering surface, such as the screen or paper

iPod v1G-v3G
( G=generation )

iPod 1G,2G,3G Layout Metrics

• Rendering Surface : 320px X 480px @163ppi
•  
• Actual Visible Area (portrait) : 320px X 356px
• Actual Visible Area (landscape) : 480px X 208px
• Wi-Fi : 802.11b/g
• 

@media query :

1. @media screen and (width: 320px), screen and (device-width:320px) and (orientation:portrait) {}

2. @media screen and (width: 480px), screen and (device-width:480px) and (orientation: landscape) {}

iPod 4G

• Rendering Surface : 960px X 640px @ 326ppi
• Wi-Fi : 802.11 b/g/n (n only 2.4 GHz)

@media query :

1. @media screen and (width: 640px), screen and (width:640px) and (orientation: portrait) {..}

2. @media screen and (width: 960px), screen and (width:960px) and (orientation: landscape) {..}

Support for 1024 x 768 with Dock Connector to VGA Adapter

iPhone 4s

* Rendering Surface : 960px X 640px @ 326ppi

* Wi-Fi : 802.11 b/g/n (n only 2.4 GHz)

@media query :

1. @media screen and (width: 960px), screen and (width:960px) and (orientation: landscape) {..}

2. @media screen and (width: 640px), screen and (width:640px) and (orientation: portrait) {..}

iPad2

• Rendering Surface : 1024px X 768px @132ppi
• Wi-Fi : 802.11a/b/g/n

@media query :

1. @media screen and (width:1024px), screen and (width:1024px) and (orientation: landscape) {..}

1. @media screen and (width:768px), screen and (width:768px) and (orientation: portrait) {..}

Motorola DROID Bionic w/ Android OS

 * Rendering Surface : 960 x 540

 * MOTOPRINT : wireless printing over WiFi

 * Webkit5 HTML Browser & Flash 10

 * WiFi : b/g/n Capable

 * HDMI connection w/ mirror mode 1080p

@media query :

1. @media screen and (width: 960px), screen and (width:960px) and (orientation:landscape) {}

2. @media screen and (width: 540px), screen and (width:540px) and (orientation: portrait) {}