CSS Media Queries regarding max-width property to make 1024px size for Tablet and Desktop

Question

I am still trying to figure out how media queries work. I have two media queries one targeting max-width: 1024px and the other targeting max-device-width: 1024px for tablet.

The problem i am facing is that when i test it on my iPAD it skips the max-device-width: 1024px and goes for the max-width: 1024px.

My question is how can i write a media query for both Desktop and Tablet for max width 1024px ?

The reason i want to have one for desktop and one for tablet at 1024 width is because i need different style for each.

My CSS code is below.

  @media screen and (max-device-width: 1024px) and (orientation: portrait)
        {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
          {
            height: 26%;left: 5%;
          }
       } 

  @media screen and (max-width: 1024px)
       {#cast1, #cast2, #cast3, #cast4, #cast5, #cast6, #cast7 
          {
            height: 45%;left: 5%;
          }
       }

Answer 1

This set of media queries suitable for the “tablet-and-desktop”

Mobile

only screen and (min-width: 480px) { ... }

Tablet

only screen and (min-width: 480px) { ... }
only screen and (min-width:321px) and (max-width:768px) { ... }
only screen and (min-width: 768px)  { ... }

Desktop

only screen and (min-width: 992px) { ... }

Huge

only screen and (min-width: 1280px) { ... }

Answer 2

check Media Queries for Standard Devices. it may be usefull

Answer 3

I would suggest you to use this media query inside your existing query to make sure its a device with retina resolution

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ }