Conflict with Iphone media queries. "X" Media Query overwriting "Y"

The "X" media queries overwriting "Y" Eg.

  /* ----------- iPhone 4 and 4S ----------- */
    @media (min-width: 320px) and (max-width: 480px){ 
    header{ height:480px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 4";}
    }
    /* ----------- iPhone 5 and 5S ----------- */
    @media (min-width: 320px) and (max-width: 568px){
    header{ height:599px; width: 100%; background-color: blue; } 
    h1:before {content: "iPhone 5";}
    }

I tried adding the device-aspect-ratio to fix the issue, but did not work.

Somebody have the answer?

How avoid this situation on new devices in the future?