android/phonegap应用多屏支持

我们正在为使用html5，CSS3，JQM和phonegap的android平台开发移动应用程序。由于Android手机中有各种不同的屏幕尺寸，我们无法找到适合多屏幕背景图像或任何图像的方法。背景图片会适合体面在说的HTC One V，三星S3迷你，但将无法在更大的手机，如三星注等伸展android/phonegap应用多屏支持

我们已经使用

我们已经使用了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; 
```
}
- 这不起作用图像。
我们试图通过将宽度=设备宽度，高度=设备高度，初始比例= 1.0改变视元数据，目标dpi的=设备-dpi和使用的528 * 909的图像（例如）。这会稍微切割图像，但适合屏幕。同时，用户界面中的所有jquery移动组件都缩小了大小。我们不确定这是否正确。

对于靶向多达屏幕尺寸成为可能，这是要考虑的参数？屏幕尺寸，分辨率还是DPI？

我们究竟能做些什么来确保我们的背景图像适合几乎所有的android手机屏幕（如samsung Note）。

或者你能否告诉我们是否可以在任何一种方法上即兴创作？

来源

2013-03-13 user2166711

我假设你的背景图像不是瓦片。

不要拉伸图像太多。它会使你的图像看起来模糊或不清晰。与原生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 /华电国际/ xhdpi - 我不知道现在。我不认为你可以在浏览器中使用androids内部大小调整机制使用谷歌浏览器的dp值（这不是dpi），所以你最好的选择是使用4种最常见的分辨率（例如宽度为320,480,600 ，800 - 我可能是错的）和中等分辨率的缩小图像。

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

LDPI
华电国际
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和windowheight必须匹配的screen值。否则，您的图像会缩放并且看起来不太好 - 而且您的应用程序看起来会比原生图像差得多（除非不常见的情况下不使用任何基于像素的（.png/.jpg）图像）。您可以使用媒体查询修复映射，这可能有点烦琐。

后，您已经完成了1：你可以使用screen.width 1像素映射（您将有比较screen.width和screen.height，如果您的应用程序同时支持横向和纵向取较小值）。如果1：1映射出于某种原因不可能（应该尽可能避免的最坏情况），请使用window.innerWidth或$(window).width()。您的jqm行为（使用您提供的元标记时缩小的大小）可能表示您的像素映射不如其准确。

为所有的图像缩放比率

3:4:6:8 (ldpi:mdpi:hdpi:xhdpi)

来源

2013-05-27 09:39:06 biodiv

android/phonegap应用多屏支持

welcomePage {

回答

相关问题