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?

Answer 1

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.