Media queries for iPhone not working?

HTML-CSS
1 
/* iPhone 8 */
@media only screen 
    and (max-width : 375px) 
    and (max-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) {
      .footer {
        font-size: .7em;
        padding: 3%;
      }
    
      .footerBg {
        height: 80%;
        width: 100%;
        margin-top: -60%;
      }
    }

This works on the Chrome toggle device bar iPhone 6/7/8. What is going on?