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

我正在使用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像素的iPhone4S上，加载的样式表是M_global.css。我使用的是iOS 5.1，据我所知，iOS上的UIWebView，至少在iOS 5+上支持媒体查询（毕竟，它确实加载了一个样式表）

我也尝试过使用min device width/max device width和-webkit min device width/-webkit max device width，只是想看看这是否有区别，但没有。我还尝试在上述各种组合的前面添加“only”（即media=“only screen and（最小宽度：480px）和（最大宽度：719px）），但这也没有帮助（这并不奇怪）

我尝试将M_global.css文件的查询条件设置为minwidth:0和maxwidth:0，只是想看看它是否加载了特定的样式表，但是它没有加载任何css

如果这是一个应用程序，我只是为自己，为了好玩，我会离开它，只是接受它加载了错误的CSS文件，并充分利用它。然而，这不适合我，我也不是维护这个应用程序的人，所以它必须是正确的

---

有没有人在iOS中有过这种古怪行为的经验并找到了解决办法？

你需要测试一下规模，比如：

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

---

您需要测试天平，如下所示：

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

---

不管你的手机的实际像素尺寸是多少，你都需要意识到CSS是指“CSS设备像素”，这是完全不同的

您的样式表仍然显示您的iphone是320x480。像素密度较高，但需要考虑“CSS像素”

---

即使是高分辨率设备也报告CSS像素值较低。谷歌搜索它。

无论手机的实际像素尺寸是多少，你都需要意识到CSS关注的是完全不同的“CSS设备像素”

您的样式表仍然显示您的iphone是320x480。像素密度较高，但需要考虑“CSS像素”

即使是高分辨率设备也报告CSS像素值较低。谷歌