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提供跨浏览器的视网膜和非视网膜解决方案。

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

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

Answer 2

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

PhoneGap，jQuery Mobile和Retina Display

2 个答案: