1

我正在使用 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 中这种古怪的行为有任何经验并找到了解决方法？

4

2 回答 2

1

您需要测试规模，如下所示：

media="-webkit-min-device-pixel-ratio: 2"
于 2012-05-07T15:37:24.230 回答
0

无论您手机的实际像素尺寸是多少，您都需要意识到 CSS 正在查看完全不同的“CSS 设备像素”。

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

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

于 2014-10-01T21:43:24.070 回答