Iphone X 媒体查询也适用于 iphone 8 plus

Question

我正在为 iPhoneX 添加样式，但它甚至也反映在 iPhone 6、7、8 plus 设备上。

正在撰写媒体查询

@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%;
}

甚至尝试添加 iPhone6、7、8 plus 设备特定的媒体查询并提供margin-top: 0%

但这也没有用。任何答案都会有很大帮助。

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 */}