Media Query for iPad and desktop (max-width)

Question

I want some CSS code to target both iPad and desktop with max-width: 768.

This (I don't know why, would be glad to know) doesn't work for the iPad (only desktop):

@media only screen and (max-width: 768px)

so I had to to this for the iPad:

@media only screen and (device-width: 768px)

However, I have the exact same code inside both media queries, and that I cannot accept.

I tried this also:

@media only screen and (max-width: 767px) or (device-width: 768px)

This one above doesn't work either - it actually works for the desktop, no matter what width, and not on iPad. Really strange.

How to target both iPad and desktop with same media query?

Now your code above doesn't show it, but I'm assuming you're adding the proper brackets after this @ media only and around your css: { } ?? - As in @media only screen and (max-width:767px) { .example{width:100px;} } — Andy, Oct 25 '12 at 20:10
It seems to me that the only solution is to use all that code as default CSS instead, and put all the CSS that 'opposes' to it inside a media query with (min-width: 769px) to target the desktop. I haven't thought of that before because I've been considering the desktop wide screen to be the default layout.. what do you people think? — zok, Oct 26 '12 at 18:08

score 21 · Accepted Answer · answered Oct 31 '12 at 08:31

You can use a comma to include two different rules inside the @media query. This would avoid redundant CSS for both devices when the rules are the same:

@media only screen and (device-width: 768px),
       only screen and (max-width: 768px) {
/* CSS */
}

The following codes are specifically for iPad (portrait and landscape):

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

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

Hope this helps you! Let me know if you have questions or need clarification on this.

score 8 · Answer 2 · edited Jan 29 '16 at 09:04

8

I have used this. work for me in all device.

@media only screen and (min-width: 1024px) and (max-width: 1199px){

}

@media only screen and (min-width: 768px) and (max-width: 1023px){

}

@media only screen and (min-width: 480px) and (max-width: 767px){

}

@media only screen and (min-width: 0px) and (max-width: 479px){

}

edited Jan 29 '16 at 09:04

Rohan Kumar

40,431
11
76
106

answered May 07 '14 at 11:54

Amit

1,841
1
19
36

score 1 · Answer 3 · answered Jun 28 '15 at 12:25

1

You need this in your HTML then your media queries will work for both.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

answered Jun 28 '15 at 12:25

user2760338

235
1
4
13

Media Query for iPad and desktop (max-width)

3 Answers3