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

【问题标题】：iOS loading wrong style sheet based on media queriesiOS根据媒体查询加载错误的样式表
【发布时间】：2012-05-16 02:48:05
【问题描述】：

我正在使用 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 中遇到过这种古怪的行为并想出了解决方法？

【问题讨论】：

标签： html css ios media-queries iphone-web-app

【解决方案1】：

你需要像这样测试秤：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：