0

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

我们使用的方法

  1. 我们为 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;

    }

    • 这不起作用。

  2. 我们试图通过插入 width=device-width , height=device-height, initial scale=1.0 , target-dpi=device-dpi 并使用 528*909 的图像（例如）来更改视口元数据。这会稍微削减图像但适合屏幕。同时，UI 中的所有 jquery 移动组件都缩小了尺寸。我们不确定这是否是正确的方法。

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

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

或者你能告诉我们是否可以即兴创作方法 1 或 2？

4

1 回答 1

0

我假设您的背景图像不是瓷砖。

不要过度拉伸图像。它会使您的图像看起来模糊或不清晰。与原生 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 添加分辨率 - 我目前不知道。我不认为您可以在浏览器中使用 googlesdp值（不是dpi）来使用 androids 内部尺寸调整机制，因此您最好的选择是使用 4 种最常见的分辨率（例如宽度为 320、480、600、800 - 我可能是错的）和中间分辨率的缩小图像。

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

  • 低密度脂蛋白
  • 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());

的widthandheight必须window匹配 的值screen。否则，您的图像会被缩放并且看起来不太好 - 您的应用程序看起来会比原生应用程序更糟糕（除了不使用任何基于像素 (.png/.jpg) 图像的非常罕见的情况）。您可以使用媒体查询来修复映射，这可能有点繁琐。

完成 1:1 像素映射后，您可以使用（如果您的应用同时支持横向和纵向，screen.width则必须比较screen.width并取较小的值）。screen.height如果由于某种原因无法进行 1:1 映射（应不惜一切代价避免最坏的情况），请使用window.innerWidthor $(window).width()。您的 jqm 行为（使用您提供的元标记时减小的大小）可能表明您的像素映射不如预期的准确。

所有图像的缩放比例是

3:4:6:8 (ldpi:mdpi:hdpi:xhdpi)
于 2013-05-27T09:39:06.763 回答