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?

Solution 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.

Solution 2

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){

}

Solution 3

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">