iPhone Media Queries

iphone_queries.css

<!-- iPhone 2G, 3G, 3GS Portrait -->
@media only screen and (device-width: 320px) and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
  /* CSS3 Rules for iPhone in Portrait Orientation */
}

<!-- iPhone 2G, 3G, 3GS Landscape -->
@media only screen and (device-width: 480px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
	/* CSS3 Rules for iPhone in Landscape Orientation */
}

<!-- iPhone 4, 4S Portrait -->
@media only screen and (device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	/* CSS3 Rules for XX iPhone in Portrait Orientation */
}

<!-- iPhone 4, 4S Landscape -->
@media only screen and (device-width: 960px) and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
	/* CSS3 Rules for iPhone in Landscape Orientation */
}

<!-- iPhone 5 Portrait -->
@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for XX iPhone in Portrait Orientation */
}

<!-- iPhone 5 Landscape -->
@media screen and (device-height: 320px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    /* CSS3 Rules for XX iPhone in Portrait Orientation */
}