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  */
}

No comments:

Post a Comment

IF you have any suggestions or any article then write in comments we will contact you.