PhoneGap，jQuery Mobile和Retina Display

我正在使用jQuery Mobile的PhoneGap应用程序。目前我只在iPhone和iPhone视网膜模拟器测试。PhoneGap，jQuery Mobile和Retina Display

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

我缺少什么？

来源

2011-09-25 kfuglsang

我想你猜对了。

看看JQM.css文件。

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

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

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

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

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

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

来源

2011-10-11 06:06:58 frequent

-2

在你的情况下，你必须只针对图像，而不是整个视口。图像必须比正常显示缩小一半。

来源

2012-12-14 22:05:13 benchaaben

请给出示例代码来支持您的问题。 – mccannf

你的答案很难理解 –

PhoneGap，jQuery Mobile和Retina Display

回答

相关问题