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

7 thoughts on “iPhone and iPad with CSS3 Media Queries

  1. “Also dont forget to add this meta tag at head”–What meta tag? Do you mean:
    ?

    Like

  2. meta name=”viewport” content=”width=device-width, initial-scale=1.0″

    Like

  3. I was curious if you ever considered changing the structure of your website?
    Its very well written; I love what youve got to say. But maybe you could a little more in
    the way of content so people could connect with it better.
    Youve got an awful lot of text for only having one
    or two images. Maybe you could space it out better?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s