android / phonegap app多屏支持答案

【问题标题】：android / phonegap app multiple screen supportandroid / phonegap app多屏支持
【发布时间】：2013-03-13 18:07:53
【问题描述】：

我们正在使用 html5、CSS3、JQM 和 phonegap 为 android 平台开发移动应用程序。由于 android 手机有不同的屏幕尺寸，我们无法找到一种方法来适应多个屏幕中的背景图像或任何图像。背景图像在 HTC One V、Samsung S3 mini 中非常适合，但无法在 Samsung Note 等更大的手机中拉伸

我们使用的方法

我们为 mdpi、hdpi、xhdpi 文件夹使用了分辨率为 320*480 的图像，并使用 CSS3，如果需要，我们会尝试将它们拉伸到更大的屏幕上。使用的 CSS ：

/* 每个屏幕的背景图像 */

欢迎页面{
```
    background:url('file:///android_res/drawable/back_welcome_2x.png') no-repeat center center;
background-attachment:fixed;
min-height:100%;
background-size:cover;
```
}
- 这不起作用。
我们尝试通过插入 width=device-width、height=device-height、initial scale=1.0、target-dpi=device-dpi 并使用 528*909 的图像来更改视口元数据（对于实例）。这会稍微削减图像但适合屏幕。同时，UI 中的所有 jquery 移动组件都缩小了尺寸。我们不确定这是否是正确的方法。

为了尽可能多地定位屏幕尺寸，要考虑哪个参数？屏幕尺寸、分辨率还是 DPI？

我们究竟能做些什么来确保我们的背景图片适合几乎所有的安卓手机屏幕（比如三星 Note）。

或者你能告诉我们是否可以在方法 1 或 2 上即兴发挥吗？

【问题讨论】：

标签： android html cordova

【解决方案1】：

我假设您的背景图片不是图块。

不要过度拉伸图像。它会使您的图像看起来模糊或不清晰。与原生 Android 应用程序一样，以多种分辨率传送背景图像。然后，您可以使用a handlebars helper 非常简单地选择正确的图像，正如我在here 中描述的那样。

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）来使用 androids 内部尺寸调整机制，因此您最好的选择是使用 4 种最常见的分辨率（例如 320 的宽度, 480, 600, 800 - 我可能错了）和中间分辨率的缩小图像。

对于 Android，通常使用 4 个图像文件夹：

ldpi
hdpi
mdpi
xhdpi

虽然它们的名称中有 dpi，但这不是您应该查看的参数。作为确定分辨率的参数，您应该使用screen.width - 在您检查您的 pg app/cordova 浏览器是否具有 1:1 像素映射之后。您可以通过以下方式做到这一点：

alert('screen size: ' + screen.width + ' x ' + screenheight + ' browser size: ' + $(window).width() + ' x ' + $(window).height());

window 的 width 和 height 必须与 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)

【讨论】：

欢迎页面{