html - iOS 基于媒体查询加载错误的样式表

Question

我正在使用 Phonegap (1.4.1)/JS (jQuery Mobile 1.0)/HTML/CSS 开发移动应用程序。我正在使用媒体查询为各种屏幕尺寸加载正确的 CSS 文件，因此我有以下代码来加载样式表:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen and (min-width: 720px)" href="../css/XL_global.css" />
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 719px)" href="../css/L_global.css" />
<link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 479px)  " href="../css/M_global.css" />
<link rel="stylesheet" media="screen and (max-width: 319px) " href="../css/S_global.css" />

我的问题:在屏幕分辨率为 960x640 像素的 iPhone 4S 上，加载的样式表是 M_global.css。我使用的是 iOS 5.1，据我所知，iOS 上的 UIWebView，至少在 iOS 5+ 上支持媒体查询(毕竟，它确实加载了其中一个样式表)。

我也尝试过使用 min-device-width/max-device-width 和 -webkit-min-device-width/-webkit-max-device-width，只是想看看它是否有所不同，但它没有。我还尝试在上述各种组合的前面添加“仅”一词(即 media="only screen and (min-width: 480px) and (max-width: 719px)")，但那没有也无济于事(真的不足为奇)。

我已经尝试将 M_global.css 文件的查询条件设置为 min-width:0 和 max-width:0 只是为了看看它是否正在加载特定的样式表，但它没有加载任何 CSS .

如果这是我为自己制作的应用程序，只是为了好玩，我会保留它并接受它加载了错误的 CSS 文件并充分利用它。但是，这不适合我，我也不是维护此应用程序的人，因此它必须是正确的。

有没有人对 iOS 中的这种古怪行为有任何经验并找到了解决方法？

Answer 1

你需要像这样测试天平:

media="-webkit-min-device-pixel-ratio: 2"