iPhone XR的CSS媒体查询不起作用？

Question

我正在使用Phonegap开发混合移动应用程序。

除了一个仅在iPhone XR上存在的问题之外，一切工作都很好。

iPhone X或iPhone XS等上不存在该问题。

基本上，我的CSS媒体查询在iPhone XR上不起作用（不执行任何操作）。

这就是我用于 iPhone XR 的内容：

/* iPhone XR */
@media only screen 
    and (min-device-width: 414px) 
    and (min-device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
    /* my styles goes here */



}

有什么我想念的东西吗？为什么这个媒体查询在iPhone XR上什么都没做？

有人可以请教这个问题吗？

先谢谢了。

编辑：

以下CSS媒体查询在iphone x和iphone xs max上运行良好：

    /* iphone x */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {


}

Answer 1

根据iPhone XR屏幕尺寸：

iPhone XR的正确媒体查询是：

@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 2) {}

Answer 2

这对我有用

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) {}