Iphone X media queries applying to iphone 8 plus also

Question

I am adding styles for iPhoneX but its even getting reflected for iPhone 6,7,8 plus devices too.

Media queries am writing

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)and (orientation : portrait){
      margin-top: 5%;
}

even tried adding iPhone6,7,8 plus devices specific media query and giving margin-top: 0%

but that also didn't work. Any answers would be a great help.

Answer 1

IPhoneX

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) { /* STYLES GO HERE */}

IPhone 6,7,8

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}