Width of Standard Devices Used in css Media Queries.

In last post I have discussed that how to use css media queries to write css for different screen sizes. In this post we will discuss about screen sizes of some commonly used devices. So that will help you to write media queries for each device.

Width of Most commonly used devices is as follows

.

Device	Width	Height
iPhone 5	320	568
iPhone 3G and 4	320	480
iPad	768	1024
Google Nexus 7	600	905
Samsung Galaxy S2	320	533

Smart phones landscape: Apply css on when screen width is greater than 321px

@media only screen and (min-width : 321px) {
/* css  */
}

Smart phones Portrait: Apply css on when screen width is Less than 320px

@media only screen  and (max-width : 320px) {
/* css  */
}

iPads landscape: In iPads we can check the orientation of the device. So we can mention orientation in the query and the css will apply when the orientation is landscape.

@media only screen and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* css  */
}

iPads portrait: css will apply when the orientation of device is portrait.

@media only screen and (min-device-width : 768px)
and (max-device-width : 1024px)  
and (orientation : portrait) {
/* css  */
}

For small devices

@media all and (max-width: 240px) {
 /*  css  */
}

For Standard Desktop

@media all and (min-width: 1024px) and (max-wdth:1366px) {
 /*  css  */
}

For large Screens

@media all and (min-width: 1367px) {
 /*  css  */
}