CSS: media-queries-on-mobile

media-queries-on-mobile.css

/*iPhone5*/
@media screen and (device-aspect-ratio: 40/71) {}
/*或者：
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}    

/*iPhone 5 In Portrait & Landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
}	

/*iPhone 5 In Landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
}	

/*iPhone 5 In Portrait*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
}	

/*iPone4*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}

/*iPhone 3G*/
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}	
/*iPhone*/
/*Landscape*/
@media screen and (max-device-width: 480px) {}
/*Portrait*/
@media screen and (max-device-width: 320px) {}	

/*Blackberry Torch*/
@media screen and (max-device-width: 480px) {}	

/*Samsung S3*/
@media only screen and (-webkit-device-pixel-ratio: 2) {}

/*Google Nexus 7*/
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}	

/*Samsung Galaxy S3*/
@media only screen and (-webkit-device-pixel-ratio: 2) {}	

/*Samsung Galaxy S2*/
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}	

/*Galaxy Tab 10.1*/
/*Landscape*/
@media (max-device-width: 1280px) and (orientation: landscape) {}

/*Portrait*/
@media (max-device-width: 800px) and (orientation: portrait) {}	
iPad In Portrait & Landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
}	

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

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

/*Retina iPad In Portrait & Landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
}	

/*Retina iPad in landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
}	

/*Retina iPad in portrait*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
}	

/*iPad Mini In Portrait & Landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
}	

/*iPad Mini In Landscape*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1){
}	

/*iPad Mini In Portrait*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) {
}	

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
  /* Styles */
}