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" />

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

我也使用min-device-width / max-device-width和-webkit-min-device-width / -webkit-max-device-width，只是为了看看它是否有所作为，但它没有。我也尝试添加“＃34;”这个词，而且只是＃34;在各种上述组合的前面（即媒体=＆＃34;只有屏幕和（最小宽度：480px）和（最大宽度：719px）＆＃34;），但这并没有帮助（真的没有意外）。

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

如果这是我为自己制作的应用程序，为了好玩，我会留下它并且接受它加载了错误的CSS文件并充分利用它。但是，这不适合我，而且我不是那个维护这个应用程序的人，所以它必须是正确的。

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

Answer 1

您需要测试比例，如下所示：

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

Answer 2

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

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

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

iOS根据媒体查询加载错误的样式表

2 个答案: