android / phonegap应用程序多屏幕支持
我们正在使用html5、CSS3、JQM和phonegap为安卓平台开发一个移动应用程序。由于android手机有不同的屏幕大小，我们无法找到适合多个屏幕的背景图像或任何图像的方法。这些背景图像很适合宏达电、三星S3迷你手机等，但在三星Note等更大的手机中却无法伸展。
我们使用的方法
- 我们已经为mdpi，hdpi，xhdpi文件夹使用了分辨率320*480的图像，如果需要的话，我们正在尝试在更大的屏幕中扩展它们。CSS使用： 每个屏幕的/*图像*/ welcomePage{ background:url('file:///android_res/drawable/back_welcome_2x.png')无重复中心；背景附件:固定；最小高度:100%；背景尺寸:盖子； }
- This does not work.
- 我们尝试通过插入宽度=设备宽度、高度=设备高度、初始scale=1.0、目标-dpi=设备-dpi并使用图像528*909 (例如)来更改视口元数据。这减少了一些图像，但适合屏幕。同时，UI中的所有jquery移动组件都减小了大小。我们不确定这是否是正确的办法。
对于尽可能多的屏幕大小，需要考虑的参数是什么？屏幕大小，分辨率，还是新闻部？
我们能做些什么来确保我们的背景图像适合几乎所有android手机屏幕(比如三星Note)。
或者你能说出我们是否可以在任何一种方法上即兴发挥？
Stack Overflow用户
发布于 2013-05-27 09:39:06
我假设你的背景图像不是一块瓷砖.
不要拉伸太多的图像。它会使你的图像看起来模糊或不清晰。就像一个原生的Android应用程序一样，以多种分辨率发布背景图像。然后，您可以非常简单地使用把手帮手选择正确的图像，正如我所描述的这里。
Javascript:
if (screen.width <= 480) {
imgFolder = 'img/low/';
}
else {
imgFolder = 'img/high/';
}
Handlebars.registerHelper('imgFolder', function () {
return imgFolder
});HTML:
<body style="background:url('{{imgFolder}}yourImage.png'); background-size:cover;" />当然，您必须为ldpi/mdpi/hdpi/xhdpi添加分辨率--我目前还不知道。我不认为在浏览器中可以使用机器人内部大小调整机制，使用googles dp值(这不是dpi)，所以您最好的选择是使用4种最常见的分辨率(例如，320、480、600、800的宽度--我可能错了)和中间分辨率的低比例尺图像。
对于Android，常见的做法是使用4个图像文件夹：
- ldpi
- hdpi
- mdpi
- xhdpi
尽管它们的名称中有dpi，但这不是您应该查看的参数。作为确定分辨率的参数，您应该使用screen.width --在检查pg应用程序/cordova浏览器是否有1:1像素映射之后。您可以使用以下方法来做到这一点：
alert('screen size: ' + screen.width + ' x ' + screenheight + ' browser size: ' + $(window).width() + ' x ' + $(window).height());width和height of window必须匹配screen的值。否则，你的图像就会缩放，看起来不太好--而且你的应用程序看起来会比原生软件糟糕得多(除了不使用任何基于像素的图像(..png/.jpg)这一非常罕见的情况外)。您可以使用媒体查询修复映射，这可能有点繁琐。
在完成了1:1像素的映射之后，您可以使用screen.width (如果您的应用程序同时支持景观和纵向方向，您将不得不比较screen.width和screen.height，并获得较小的值)。如果1:1映射由于某种原因不可能实现(最坏的情况应该不惜一切代价避免)，请使用window.innerWidth或$(window).width()。您的jqm行为(在使用您提供的元标记时减小了大小)可能表明您的像素映射不像可能的那样精确。
所有图像的缩放比为
3:4:6:8 (ldpi:mdpi:hdpi:xhdpi)https://stackoverflow.com/questions/15393138
复制相似问题
腾讯云开发者
