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

【问题标题】：CSS media query for iPhone XR doesn't work?iPhone XR 的 CSS 媒体查询不起作用？
【发布时间】：2019-02-05 16:55:45
【问题描述】：

我正在使用 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) {


}

【问题讨论】：

屏幕像素和渲染像素是有区别的。我的意思是分辨率为 1920x1080 的手机可能会以 910x540 像素呈现网站。 -webkit 也是浏览器特定的前缀，因此它可能不适用于 Firefox：developer.mozilla.org/en-US/docs/Web/CSS/@media/…
@SuperDJ，不完全确定你指的是什么，但我已经编辑了我的问题，以防有什么不清楚的地方。

标签： css iphone phonegap

【解决方案1】：

根据 iPhone XR 屏幕尺寸：

iPhone XR 的正确媒体查询是：

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

【讨论】：

【解决方案2】：

这对我有用

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

【讨论】：