PhoneGap、jQuery Mobile 和 Retina 显示
我正在使用 jQuery Mobile 开发 PhoneGap 应用程序。 目前我只在 iPhone 和 iPhone 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');
}
}
我错过了什么？
I am working on a PhoneGap application using jQuery Mobile.
Currently I am only testing in the iPhone and iPhone Retina-simulators.
When I open up the application in Retina-mode, the application's density is correct but the page is only half the screen size on both dimensions.
My own guess is that jQuery Mobile's css does not scale up the widths and heights, but I haven't been able to find anything about this.
My HTML has this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
And then I execute this 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');
}
}
What am I missing?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我认为你猜对了。
查看 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 文件很好，但很难下载:-)
I think you are guessing correct.
Look at the JQM.css file.
It only includes media queries for hi-res/lo-res icons. Everything else is "as is" on retina and non-retina devices, so JQM only supports retina in terms of icon-size.
By specifying
initial-scale=.5, maximum-scale=.5, minimum-scale=.5you are locking everything in at 50%. So there is your non-scalable half page.The more you tailor for retina ("high-end") devices the more trouble you will have with standard browsers (especially "low end", like IE7). Check the JQM iconsprite positioning in IE7 for example - if you don't include a script like respond.js to support media queries, icons will be off-postion.
I think there is currently just not enough retina devices to warrant JQM providing a cross-browser retina and non-retina solution.
I found some good info here. I also did a CSS-only iOS tab-bar, which works down to IE7.
Check the CSS required in my plugin to just make icons and gradient backgrounds look good on all browsers and the amount of extras CSS necessary to tailor for IE7+8. A retina/non-retina JQM.css file would be nice to have but hard to download :-)
在您的情况下，您必须仅定位图像而不是整个视口。
图像的尺寸必须比正常显示的尺寸小一半。
In your case you have to target images only and not the entire viewport.
the images have to half size down than your normal display.