适用于iPhone 8 Plus的iPhone X媒体查询

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以及设备特定的媒体查询并提供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 */}