welcomePage {

Question

我们正在使用html5，CSS3，JQM和phonegap为Android平台开发移动应用程序。由于Android手机的屏幕尺寸各不相同，我们无法找到适合背景图像或多个屏幕中任何图像的方法。背景图片可以很好地适用于HTC One V，三星S3 mini，但无法在三星Note等更大的手机中延伸

我们使用的方法

我们使用分辨率为320 * 480的图像作为mdpi，hdpi，xhdpi文件夹并使用CSS3，如果需要，我们会尝试在更大的屏幕中拉伸它们。使用的CSS：
每个屏幕的
/ * bkground图像* /

welcomePage {
```
    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？

我们究竟能做些什么来确保我们的背景图像几乎适用于所有Android手机屏幕（如三星Note）。

或者你能否告诉我们是否可以通过任何一种方法即兴表演？

Answer 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之外的值）来使用机器人内部大小调整机制，因此您最好的选择是使用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());

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

完成1：1像素映射后，您可以使用screen（您必须比较screen.width和screen.width，如果您的应用同时支持横向和纵向）。如果由于某种原因1：1映射不可能（最坏情况应该不惜一切代价避免），请使用screen.height或window.innerWidth。您的jqm行为（使用您提供的元标记时缩小尺寸）可能表示您的像素映射不够准确。

所有图片的缩放比例为

$(window).width()

android / phonegap app支持多屏幕

welcomePage {

1 个答案: