How to set different media-queries for laptop 1024px and ipad 1024px width?

Question

I want to set different media queries for 1024px width screens depending on whether it's a laptop screen or iPad screen.

For example if someone view my site in laptop(width : 1024px) they should see an image and if they view it from iPad(width : 1024px ) the image should be hidden(display:none).

Solution

You probably mean iPad Pro whose width is 1024px.

You can detect whether the device is an iPad or a laptop using media queries by checking for the device height: iPad Pro height is 1366px which, I think, is higher than the height of any laptop, so the CSS would look like this:

@media screen and (min-width: 1024px) and (min-height: 1320px) {
    /* iPad Pro */
}

@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* Laptop */
}