iPad media query not working?

Question

iPad

I set up a media query for smartphone screens, but nothing changes on the site for the iPad, as if the media query for it is not connected at all.
In the HTML I wrote:

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

The media queries themselves:

@media (min-device-width: 320px) and (max-device-width: 480px) {
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 30px;
  }
  #online_claim {
    margin-top: 50px;
  }
  #possibility {
    margin-left: 20px;
  }
  .automobile {
    margin-bottom: 20px;: 
  }
  .name_claim {
    margin-top: 20px;
  }
  .phone_head {
    font-size: 30px;
  }
  .chance_mobile {
    margin-left: 22px;
  }
}
@media (min-device-width: 768px) and (max-device-width: 1024px)  {
  h1{
    font-size: 10px;
  }
}

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

@media screen and (max-width: 992px){
 ...
}

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

Answer 2

There are two options:

/*==========  Mobile First  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px){}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px){}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px){}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px){}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px){}

/*==========  Mobile Last==========*/
@media only screen and (max-width:1199px){}
@media only screen and (max-width:991px){}
@media only screen and (max-width:767px){}
@media only screen and (max-width:479px){}