PhoneGap,jQuery Mobile和Retina Display

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 图标精灵定位 - 如果您不包含像respond.js这样的脚本来支持媒体查询，图标将偏离位置。

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

我在这里找到了一些很好的信息。我还做了一个纯 CSS 的iOS 选项卡栏，它可以在 IE7 下运行。

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