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. 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.

iPod v1G-v4G
( G=generation )

iPod 1G,2G,3G

• Resolution : 480px X 320px @163ppi
• Wi-Fi : 802.11b/g

@media query :

1. @media screen and (max-device-width:320px) and (orientation:portrait) and (resolution:163dpi) {}

2. @media screen and (max-device-width:480px) and (orientation:landscape) and (resolution:163dpi) {}

iPod 4G

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

@media query :

1. @media screen and (max-device-width:640px) and (orientation : portrait) and (resolution:326dpi) {..}

2. @media screen and (max-device-width:960px) and (orientation : landscape) and (resolution:326dpi ) {..}

Support for 1024 x 768 with Dock Connector to VGA Adapter

iPad2

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

@media query :

1. @media screen and (max-device-width:1024px) and (orientation:landscape) and (resolution:132dpi ) {..}

1. @media screen and (max-device-width:768px) and (orientation:portrait) and (resolution:132dpi ) {..}