Tag Archives: CSS3

08.06.13
by

iPhone and iPad with CSS3 Media Queries

I’ve posted media queries to help designers & developers for their responsive designes.
Many times We’ve had to design responsive websites targeting specific devices with CSS media queries.

iPad in portrait & landscape @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { /* Your Styles */ }iPad in landscape@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
and (orientation : landscape) {
/* Your Styles */
}

iPad in portrait

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

iPhone 5 in portrait & landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* Your Styles */
}

iPhone 5 in landscape

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : landscape) {
/* Your Styles */
}

iPhone 5 in portrait

@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
and (orientation : portrait) {
/* Your Styles */
}

Also dont forget to add this meta tag at head

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
Advertisements