PhoneGap、jQuery Mobile 和 Retina Display答案

【问题标题】：PhoneGap, jQuery Mobile and Retina DisplayPhoneGap、jQuery Mobile 和 Retina Display
【发布时间】：2012-12-15 06:05:13
【问题描述】：

我正在使用 jQuery Mobile 开发 PhoneGap 应用程序。目前我只在 iPhone 和 iPhone Retina 模拟器中进行测试。

当我在 Retina 模式下打开应用程序时，应用程序的密度是正确的，但页面在两个维度上都只有屏幕大小的一半。

我自己的猜测是 jQuery Mobile 的 css 并没有按比例放大宽度和高度，但我还没有找到任何相关信息。

我的 HTML 有这个：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

然后我执行这个 Javascript：

if ($.mobile.media("screen and (min-width: 320px)")) {
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}

我错过了什么？

【问题讨论】：

标签： jquery-mobile cordova retina-display

【解决方案1】：

我认为你猜对了。

查看 JQM.css 文件。

它仅包括对高分辨率/低分辨率图标的媒体查询。在 Retina 和非 Retina 设备上，其他一切都是“原样”，因此 JQM 仅在图标大小方面支持 Retina。

通过指定initial-scale=.5, maximum-scale=.5, minimum-scale=.5，您将所有内容锁定在 50%。所以有你的不可扩展的半页。

为 Retina（“高端”）设备定制的越多，使用标准浏览器（尤其是“低端”，如 IE7）就会遇到更多麻烦。例如，检查 IE7 中的 JQM 图标精灵定位 - 如果您不包含像 respond.js 这样的脚本来支持媒体查询，则图标将偏离位置。

我认为目前没有足够的视网膜设备来保证 JQM 提供跨浏览器的视网膜和非视网膜解决方案。

我发现了一些很好的信息here。我还做了一个纯 CSS 的 iOS tab-bar，它适用于 IE7。

检查我的插件中所需的 CSS，以使图标和渐变背景在所有浏览器上看起来都很好，以及为 IE7+8 定制所需的额外 CSS 数量。一个视网膜/非视网膜 JQM.css 文件会很好，但很难下载:-)

【讨论】：

【解决方案2】：

在您的情况下，您必须仅定位图像而不是整个视口。图像必须比正常显示缩小一半。

【讨论】：

你的答案很难理解