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');
    }
}

我错过了什么？

- kfuglsang

Answer 1

我认为你猜得对。

看看JQM.css文件。

它仅包括用于高/低分辨率图标的媒体查询。在视网膜和非视网膜设备上，除此之外的所有内容都是“原样”的，因此JQM仅支持图标大小方面的视网膜。

通过指定initial-scale=.5, maximum-scale=.5, minimum-scale=.5，您将所有内容锁定在50%。因此，您的页面只有一半是不可缩放的。

您越是为视网膜（“高端”）设备量身定制，就越会在标准浏览器（特别是“低端”浏览器，如IE7）中遇到麻烦。例如，在IE7中检查JQM图标精灵定位-如果您不包括像respond.js这样的脚本来支持媒体查询，则图标将偏离位置。

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

我在这里找到了一些好的信息here。我还做了一个仅使用CSS的iOS tab-bar，它可以在IE7上运行。

检查一下我的插件所需的CSS，只需使图标和渐变背景在所有浏览器中看起来好，并且需要额外的CSS来适应IE7+8。拥有一个视网膜/非视网膜JQM.css文件会很好，但很难下载:-)

- frequent

Answer 2

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

- benchaaben

---

你的回答很难理解。 - Sam I am says Reinstate Monica