jquery-mobile - PhoneGap、jQuery Mobile 和 Retina 显示

Question

我正在使用 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');
    }
}

我错过了什么？

Answer 1

我想你猜对了。

查看 JQM.css 文件。

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

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

您为视网膜(“高端”)设备定制的越多，标准浏览器(尤其是“低端”，如 IE7)的麻烦就越大。例如，检查 IE7 中的 JQM 图标 Sprite 定位 - 如果您不包含像 respond.js 这样的脚本为了支持媒体查询，图标将偏离位置。

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

我找到了一些不错的信息 here .我也做了一个 CSS-only iOS tab-bar ，它适用于 IE7。

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